如何检查选择框的组是否入围与否

Question

我有以下的Java脚本代码......

  var dataString = 'CategoryId='+categoryid+"&FormatId="+formatid; 

     $.ajax({ 
        type:"Post", 
        url:"MyServlet", 
        datatype:"json", 
        data : dataString, 
        success: function(data){           
         var type1= data.a; 
         var type2 = data.b; 
         var type3 = data.c; 
         var type4 = data.d; 
         var type5 = data.e; 
         var type6 = data.f; 

         if(type1){ 
          $('#type1id').append("<option value=0>SelectOne</option>");  
          $.each(type1, function(i, value){ 
           $('#type1id').append("<option value='"+this.Id+"'>"+this.DisplayName+"</option>");        
          }); 
          $('#set1').show(); 
         } 
         else{ 
          $('#set1').hide(); 
         } 

         if(type2){ 
          $('#type2id').append("<option value=0>SelectOne</option>");  
          $.each(type2, function(i, value){ 
           $('#type1id').append("<option value='"+this.Id+"'>"+this.DisplayName+"</option>");        
          }); 
          $('#set2').show(); 
         } 
         else{ 
          $('#set2').hide(); 
         } 

         if(type3){ 
          $('#type3id').append("<option value=0>SelectOne</option>");  
          $.each(type3, function(i, value){ 
           $('#type3id').append("<option value='"+this.Id+"'>"+this.DisplayName+"</option>");        
          }); 
          $('#set3').show(); 
         } 
         else{ 
          $('#set3').hide(); 
         } 

       // etc... 
       // etc... 
       // till type6 



        }      
       }); 

我有以下的html代码......

  <div id="section-2" class="section-content"> 
      <fieldset id="set1"> 
       <label for="type1id">Type 1</label> 
       <select id="type1id"> </select>   
      </fieldset> 

      <fieldset id="set2"> 
       <label for="type2id">Type 2</label> 
       <select id="type2id"> </select>   
      </fieldset> 

      <fieldset id="set3"> 
       <label for="type3id">Type 3</label> 
       <select id="type3id"> </select>   
      </fieldset> 
      </div> 

     <button disabled="disabled" type="button" id="section2-next"> 
      Next 
     </button> 

我通过获取json响应动态地使用$ .ajax（）函数动态填充所有选择框.. 显示的选择框数量取决于json数据，例如，如果json返回1数组，那么我只显示1个选择框，如果json返回2数组我显示2选择框等....如何检查是否所有显示的选择框选择，然后然后只启用下一步按钮？

Answer 1

Working example at fiddle

// example data; feeding selects 
for(var i=0; i<3;i++) { 
    tmpSelect = $("select")[i]; 
    $(tmpSelect).append($("<option/>").text("-- Choose option --").val("0")); 
    for(var y=0;y<5;y++) $(tmpSelect).append($("<option/>").text("hoho"+y).val(y+5)); 
} 

$("#section-2 select").on('change', function() { 
    var validated=false; 
    $.each($("#section-2 select"), function(k,elm){ 
     if(this.value==0) { 
      validated=false; 
      return false; 
     } else { 
      validated = true; 
     } 
    }); 
    if(validated) $("#section2-next").removeAttr("disabled"); // all selectboxes is seleceted.. 
    else $("#section2-next").attr("disabled", "disabled"); // Not selected yet.. 
}); 

编辑（更新）：

如果您还增加你的选择trought然后JavaScript的改变$。对这个

$("#section-2").on('change', 'select', function() 

Live example when i feed it with selects from an js-object

Answer 2

FIDDLE

这取决于你填补选择选项的方式。如果您没有在顶部添加额外的元素，如 - 选择 - 。然后将一直选择其中一个选项。如果您有这点，你可以在此给出arbitary值

<select class="mySelect"> 
<option value="myVal"></option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 

<select class="mySelect"> 
<option value="myVal"></option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 

<select class="mySelect"> 
<option value="myVal"></option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
</select> 

<button id="myButton">Next</button> 

然后：

$(function(){ 
$(".mySelect").change(function(){ 
    var myVar = false; 
    $(".mySelect").each(function(){ 
     if($(this).val() == "myVal"){ 
      myVar = true; 
     } 
    }); 
    if(!myVar){ 
     $("#myButton").show(); 
    } 
    else{ 
     $("#myButton").hide(); 
    } 
}); 
});