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

时间:2018-01-20 10:03:46

标签: javascript html forms drop-down-menu

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

这是我的HTML代码:

putStrLn

当我点击下拉列表中的任何地点时,它的工作非常完美,但我希望在我点击选择任何地点时隐藏表格

这是我的javascript代码:

<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>

1 个答案:

答案 0 :(得分: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?