0

これは私が持っているjsです:

<script type="text/javascript">
        $(document).ready(function(){
           $('#box1').hide();
           $('#box2').hide();
           $('#box3').hide();
           $("#thechoices").change(function(){
              if(this.value == 'all'){
                     $("#boxes").children().show();
                  }else{
                     $("#" + this.value).show().siblings().hide();
                  }
           });          
           $("#thechoices").change(); 
        });
</script>

そしてHtml：

    <div id="boxes">
       <div id="box1"><p>Box 1 stuff…&lt;/p></div>
       <div id="box2"><p>Box 2 stuff…&lt;/p></div>
       <div id="box3"><p>Box 3 stuff…&lt;/p></div>
    </div>

ドロップダウン リストから選択した後、残りのすべてのオプション/div をクリア (空) にする必要があり (ソース コードを開いても表示されません)、同時にドロップダウン リストを無効にする必要があります。

それを達成する方法は？

4

3 に答える 3

1

非表示の要素を削除します。

$('#boxes').remove('div:hidden');

ドロップダウンを無効にする:

$('#thechoices').attr('disabled', true);

したがって：

    $(document).ready(function(){
       $('#boxes > div').hide();

       $("#thechoices").change(function(){
          if(this.value == 'all')
              $("#boxes").children().show();
          else
              $("#" + this.value).show().siblings().hide();

          $('#boxes').remove('div:hidden'); // remove hidden boxes from DOM
          $(this).attr('disabled', true); // disable drop down
       });

       $("#thechoices").change(); 
    });
于 2013-03-13T11:16:36.583 に答える
0

Jaiが言ったように、おそらくあなたが探しているのはそれらを動的に作成することです。

あなたが探しているのは

$(document).ready(function(){
    $('#box1').hide();
    $('#box2').hide();
    $('#box3').hide();
    $("#thechoices").change(function(){
        if(this.value == 'all'){
            $("#boxes").children().show();
        }else{
            $("#" + this.value).show().siblings().remove();
            $(this).prop('disabled', 'disabled');
        }
    });          
    $("#thechoices").change(); 
});

jsFiddle コード

于 2013-03-13T11:41:36.510 に答える
0

あなたの要件を正しく理解している場合は、スクリプトを次のように変更します

<script type="text/javascript">
        $(document).ready(function(){
           $("#thechoices").change(function(){
              var self = $(this);
              if(self.val() !== 'all'){
                     self.attr('disabled',true);
                     $("#boxes").empty();
              }
           });          
           $("#boxes").append('<div id="box1"><p>Box 1 stuff…&lt;/p></div>       <div id="box2">p>Box 2 stuff…&lt;/p></div>       <div id="box3"><p>Box 3 stuff…&lt;/p></div>');
});
</script>

および HTMl スニペットを (ネストされた div なし)

<div id="boxes">
</div>

ボックスを動的に追加すると、それらはビュー ソースに表示されません (ビュー ソースには、サーバーから送信された html が表示されます)。そして、選択の値を変更すると、選択を無効にしてboxesdivを空にするだけです

于 2013-03-13T11:47:31.033 に答える