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，请将$ .on更改为此

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

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

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

如何选中是否选择了选择框组

2 个答案: