Use jquery show() and hide() on a form

Question

I'm using php codeigniter for my project

I try this code but its not working to show and hide my form please refer code bellow

Js File

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

Form file

<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 contains Sale,Rent,Commercial)

Thank you

Answer 1

Here you go with a solution

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

Click event should be triggered from li instead of ul #search_option_4 .

Or Second method

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

Hope this will help you.

Answer 2

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

Answer 3

Propiedad del modal.

$("#Sale_form").modal.('show');
$("#Sale_form").modal.('hide')

Respuesta:

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