用jQuery下拉列表选择

debugcn 发表于 Dev

马特

我想用year创建一个下拉列表，并确定如果客户选择year中的每个选项，他们将获得具有同一类的make选项，例如：如果他们选择year = 2015（value = 65399），则下拉列表为make将使用class =“ 65399”创建一个列表，该列表不适用于我的代码

<!doctype html>
<html>
 <head>
 <title>Learning jQuery</title>
 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 

 </head>

 <body>
 <form>


   <select class="mn-year form-select" id="edit-mn-year" name="mn-year">
   <option value="" selected="selected">- Choose Year -</option>
   <option value="65399">2015</option>
   <option value="56040">2014</option>
   <option value="55580">2013</option>
   <option value="55572">2012</option>
   
   </select>
   <select class="mn-make form-select" id="edit-mn-make" name="mn-make">
   <option value="" selected="selected">- Choose Make -</option>
   <option class="65399" value="65417">Chevrolet</option>
   <option class="65399" value="65493">Ford</option>
   <option class="65399" value="65403">GMC</option>
   <option class="65399" value="65472">Jeep</option>
   <option class="65399" value="65889">Ram</option>
   <option class="65399" value="65488">Scion</option>
   <option class="65399" value="65516">Toyota</option>
   <option class="56040" value="63128">Chevrolet</option>
   <option class="56040" value="65140">Ford</option>
   <option class="56040" value="63121">GMC</option>

   </select>

</form>



<script>
$(document).ready(function() {
	var year = $("#edit-mn-make").children('option').map(function() {
        return {
            "value": this.value,
           
        }
    })

    var make = $("#edit-mn-make").children('option').map(function() {
        return {
            "value": this.value,
			"class": this.class,
            "option": "<option value='" + this.value+ "'>" + this.text + "</option>"
        }
    })
	
	 $("#edit-mn-year").change(function() {
        $("#edit-mn-make").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < year.length; i++) {
			for(j = 0; j< make.length; j++){
				if ( year[i].value == make[j].class) {
                addoptarr.push(make[i].option);
                }
			}
            
        }
        $("#edit-mn-make").html(addoptarr.join(''))
    }).change();
        
   
})

</script>








 </body>
</html>

马丁·戈特威斯（Martin Gottweis）

我相信您会使它复杂化了一点。我为您制作了一个小提琴：https : //jsfiddle.net/79o6w2nh/

我的实现只是隐藏所有内容，然后显示以年份作为数据属性的选项。

$("#edit-mn-year").change(function(){
    $("#edit-mn-make").children().hide();
    $("#edit-mn-make").children('*[data-year="'+$(this).val()+'"]').show();
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。