Javascript 使用jQuery从下拉列表中选择后，清除其余div

这是我的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>

    <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>

$（文档）.ready（函数（）{
$（'#box1'）.hide（）；
$（'#box2'）.hide（）；
$（'#box3'）.hide（）；
$（“#选择”）.change（函数（）{
如果（this.value=='all'）{
$（“#框”）.children（）.show（）；
}否则{
$（“#”+this.value）.show（）.sides（）.hide（）；
}
});          
$（“#选择”）.change（）；
});

以及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>

盒子1的东西

    <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>

盒子2的东西

    <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>

盒子3的东西

    <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 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 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>

$(document).ready(function(){
    $('#thechoices').change(function(){
        $(this).empty();
    });
});

---

您想将其从页面中完全删除还是将其置为空白。如果您想将它们设置为空白，请执行以下操作：$（“#选择”）.empty（）；而且，javascript（jquery）不能从源代码中删除元素，只能从DOM中删除。看，是的，他是对的，它不会从源代码中删除它，只有domI想要从页面中完全删除它们，这将删除所有选项，而不仅仅是他不想要的选项。@RuralJuror“在从下拉列表中选择后，我需要清除（清空）所有其他选项”-再读一遍，小丑：“其余的选项，而不是所有的选项…”-OP