如何检查选择框组是否被选中答案

【问题标题】：How to check whether group of selectbox is seleted or not如何检查选择框组是否被选中
【发布时间】：2013-08-02 12:01:45
【问题描述】：

我有以下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 个选择框等......如何检查是否所有显示的选择框都被选中然后然后只启用下一步按钮？

【问题讨论】：

那么，如何检查每个选择框是否加载了某些内容？或者如果只有可用的选择有一个选项被选中？
选择框会有空值吗？如果没有，他们总是会选择一些东西。根据您发布的内容确实无法回答。
我已经编辑了代码.....

标签： javascript jquery

【解决方案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，则将 $.on 更改为此

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

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

【讨论】：

感谢 ans，但我现在有多个选择框，我已经显示了 3，但它会根据 servlet json 响应而变化。显示的选择框的数量不是静态的，而是动态的
我已经用一个例子更新了我的代码。如您所见，我将它喂给一个物体，并且是完全动态的。
我确实喜欢这个 var sel = $(this); if(sel.is(':empty')=== false){//并加上if else block here}

【解决方案2】：

FIDDLE

这取决于您填写选择选项的方式。如果您没有在顶部添加额外的元素，例如 --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>

<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();
    }
});
});

【讨论】：