Question

这是我所拥有的：

<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…</p></div>
       <div id="box2"><p>Box 2 stuff…</p></div>
       <div id="box3"><p>Box 3 stuff…</p></div>
    </div>

从下拉列表中选择后，我需要清除（清空）所有剩余的选项/ div，（即使我打开了它们不会出现的源代码）并在同一时间禁用下拉列表，

如何实现这一目标？

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

Answer 2

就像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 code

Answer 3

如果我理解您的要求，请将脚本更改为

<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…</p></div>       <div id="box2">p>Box 2 stuff…</p></div>       <div id="box3"><p>Box 3 stuff…</p></div>');
});
</script>

和HTMl片段（没有嵌套的div）

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

如果动态添加框，它们将不会显示在视图源中（视图源显示从服务器发送的html）。然后当您更改选择的值时，您只需禁用选择并清空boxes div

使用jQuery，从dropdown-list中选择后清除其余的Options / DIV

3 个答案: