javascript - 单击下拉列表的特定选项时隐藏表单，单击下拉列表的特定选项时显示表单

Question

我想在单击下拉列表的特定选项时显示表单，并在单击下拉列表的特定选项时隐藏表单

这是我的 html 代码:

<div class="form-group" id="venue-select">
<select class="form-control venue-dropdown" id="" onchange="myFunction()">
<option value="none" id="#hide" ><b>Select Venue Type</b></option>
<option>Theme Restaurant</option>
<option>Blah restaurant</option>
<option>Flana Restaurant</option>
<option>Woops Restaurant</option>
</select>
 </div>
    <div class="row bgcolor show-form" style="display:none;">
      <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
        <form>
         <div class="form-group">
       <label><strong>Venue Name</strong><sup class = "venue-imp">*</sup></label>
 <input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
</div>
   </form>
   </div>
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
      <form>
<div class="form-group">
   <label><strong>Venue Price</strong><sup class = "venue-imp">*</sup></label>
<input type="text" class="form-control input-lg" placeholder="Jhanqar Banquet Hall">
   </div>
</form>
 </div>
  </div>

当我单击下拉列表中的任何 field 时，它工作正常，但我希望当我单击选择任何 field 时隐藏表单

这是我的 JavaScript 代码:

/*show fom*/
function myFunction() {
    $('.show-form').show();

    //        $('.show-form').hide();

}

Answer 1

Try to this

<select class="form-control venue-dropdown" id="" onchange="myFunction(this.value)">
    <option value="Theme Restaurant 1">Theme Restaurant 1</option>
    <option value="Theme Restaurant 2">Theme Restaurant 2</option>
</select>

<script>
 function myFunction(select_value) {
     if(select_value == 'Theme Restaurant 1')
     {
      $('.show-form').show();
     }
 }
</script>