javascript - jQuery を使用してドロップダウン リストから選択した後、残りの DIV をクリアします。

Question

これは私が持っている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>

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

それを達成する方法は？

Answer 1

これでうまくいくはずだと思います。

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