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>

$.ajax()関数を使用してjson応答を取得することにより、すべての選択ボックスを動的に埋めています。表示される選択ボックスの数は、jsonデータに依存します。たとえば、jsonが1つの配列を返す場合、jsonが2つの配列を返す場合、1つの選択ボックスのみを表示しますi 2つの選択ボックスなどを表示しています....表示されているすべての選択ボックスが選択されているかどうかを確認してから、[次へ]ボタンのみを有効にする方法は?

4

2 に答える 2

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

編集(更新):

また、javascript を使用して選択を追加する場合は、$.on をこれに変更します。

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

js-object からの選択でフィードしたときのライブ例

于 2013-08-01T14:10:32.500 に答える