작성일 : 16-03-15 01:33
|
[JQuery] 동적 select chained
|
 |
|
글쓴이 :
조형래
 조회 : 4,144
|
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
(function(a){"use strict",a.fn.chained=function(b,c){return this.each(function(){var c=this,d=a(c).clone();a(b).each(function(){a(this).bind("change",function(){a(c).html(d.html());var e="";a(b).each(function(){e+="\\"+a(":selected",this).val()}),e=e.substr(1);var f=a(b).first(),g=a(":selected",f).val();a("option",c).each(function(){!a(this).hasClass(e)&&!a(this).hasClass(g)&&a(this).val()!==""&&a(this).remove()}),1===a("option",c).size()&&a(c).val()===""?a(c).attr("disabled","disabled"):a(c).removeAttr("disabled"),a(c).trigger("change")}),a("option:selected",this).length||a("option",this).first().attr("selected","selected"),a(this).trigger("change")})})},a.fn.chainedTo=a.fn.chained})(jQuery)/* Chained - jQuery non AJAX(J) chained selects plugin * * Copyright (c) 2010-2013 Mika Tuupola * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Project home: * http://www.appelsiini.net/projects/lazyload * * Version: 0.9.3 */
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#series").chained("#mark");
});
</script>
</head>
<body>
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
</body>
</html>
|
|
1464
