0

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

4

2 回答 2

0

小提琴

这取决于您填写选择选项的方式。如果您没有在顶部添加额外的元素，例如 --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();
    }
});
});
于 2013-08-01T14:17:11.103 回答
0

小提琴的工作示例

// 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()

当我使用来自 js 对象的选择来提供它时的实时示例

于 2013-08-01T14:10:32.500 回答