javascript - 在表单上使用 jquery show() 和 hide()

Question

我在我的项目中使用 php codeigniter

我尝试了此代码，但它无法显示和隐藏我的表单，请引用下面的代码

Js文件

<script>
    $('#search_option_4').on('change',function() {
        if( $(this).val()==="Sale") {
            $("#Sale_form").show()
        }
        else {
            $("#Sale_form").hide()
        }
    });
</script>

表单文件

<div class="wrap-search">
    <div class="container">
        <ul name="search_option_4" id="search_option_4" class="menu-onmap tabbed-selector">
            {options_values_li_4}
            <?php if(config_db_item('property_subm_disabled')==FALSE):  ?>
            <li class="list-property-button"><a href="{myproperties_url}">{lang_Listproperty}</a></li>
            <?php endif;?>
        </ul>
<!-- FORM -->
        <div id="Sale_form" class="search-form hidden">
            <form class="form-inline">
                <input id="search_option_smart" type="text" class="span6" placeholder="{lang_CityorCounty}" />
                <select id="search_option_2" class="span3 selectpicker" placeholder="{options_name_2}">
                    {options_values_2}
                </select>
</div>

{options_value_li_4}(值(value)包含销售、出租、商业)

谢谢

Answer 1

给你一个解决方案

<script>
$('#search_option_4 li').on('click',function() {
  if( $(this).val()==="Sale") {
    $("#Sale_form").show()
  } else {
    $("#Sale_form").hide()
  }
}); 
</script>

点击事件应该从 li 而不是 ul #search_option_4 触发。

或者第二种方法

<script>
$('#search_option_4').on('click', 'li', function() {
  if( $(this).val()==="Sale") {
    $("#Sale_form").show()
  } else {
    $("#Sale_form").hide()
  }
}); 
</script>

希望这对您有帮助。