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

【问题标题】：Hide the form when clicked on a particular option of dropdown and show the form when clicked on a particular option of dropdown单击下拉列表的特定选项时隐藏表单，单击下拉列表的特定选项时显示表单
【发布时间】：2021-04-17 05:04:19
【问题描述】：

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

这是我的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>

当我点击下拉菜单中的任何场地时，它工作得很好，但我希望在我点击选择任何场地时隐藏表单

这是我的 javascript 代码：

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

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

}

【问题讨论】：

标签： javascript html forms drop-down-menu

【解决方案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>

【讨论】：

是的，它正在工作，但选项会动态出现，我将如何为它们赋予价值？？
请将您的代码放在这里。如何创建动态选项。