javascript - Jquery 从选择框中隐藏/显示 div 不起作用，我不明白为什么？

Question

我有以下 jQuery:

<script>
    $(document).ready(function () {
        $(".search_type").hide();
        $("#select_search").change(function () {
            $('#' + $(this).val()).toggle();
        });
    });
</script>
<select id="select_search">
      <option value="1">
      <option value="2">
      <option value="3">
 </select>
 <div id="1" class="search_type">Some Text</div>
 <div id="2" class="search_type">Some Text</div>
 <div id="3"class="search_type">Some Text</div>
enter code here

目前我让它根据选择框的变化显示相应的 div，但是，如果再次更改选择框，这不会删除它。

有没有 if(($this):not.val())..... 隐藏的东西？抱歉，我是 JS/jQuery 的新手，在这里真的很挣扎。

Answer 1

您需要隐藏先前显示的元素，这是一种简单的方法来再次隐藏所有 search_type 元素，更改处理程序然后显示当前元素

jQuery(function ($) {
    var $stypes = $(".search_type").hide();
    $("#select_search").change(function () {
        $stypes.hide();
        $('#' + $(this).val()).show();
    }).change();
});

演示:Fiddle