javascript 隐藏/显示功能不起作用

Question

这是基本的html页面

    <div class="col-lg-10">
   <div class="form-group">
       <select class="form-control" id="">
           <option value="" hidden>Select Venue Type</option>
           <option onclick="myFunction()">Theme Restaurant</option>
           <option onclick="myFunction()">Blah restaurant</option>
           <option onclick="myFunction()">Flana Restaurant</option>
           <option onclick="myFunction()">Woops Restaurant</option>
            </select>
            </div>
   <div class="form-group">
  <div class="venue-type" id="restaurant-form">
  <div class="row">
 <div class="col-md-5" id="bsc-edit">
 <div class="form-group">
 <label for="city">Venue Name<sup class = "venue-imp">*</sup>
 </label>
   <input type="text" class="form-control" id="venue-name" placeholder="Jhanqar Banquet Hall" name="name">
  </div>
  </div>
<div class="col-md-1"></div>
<div class="col-md-5">
  <div class="form-group">
  <label for="city">Venue Price<sup class = "venue-imp">*</sup>
</label>
  <input type="text" class="form-control" id="venue-price" placeholder="Jhanqar Banquet Hall" name="price">
</div>
</div>
<div class="col-md-1"></div>
 </div>
 </div>
 </div>
  </div>

我希望我的下拉列表在单击时显示一个表单，并且我尝试在此处使用 javascript 函数，但它不起作用，表单按原样显示，并且 onclick 不起作用。帮我做一下，因为单击时不显示表单，但直接显示

这是 JavaScript 代码；

<script>
    function myFunction() {
    var x = document.getElementById("restaurant-form");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

Answer 1

是的，根据@gurvder372，您不能使用 onclick 作为选项。您还可以为此使用内联事件分配，例如:

 <select class="form-control" id="" onchange="javascript:return myFunction(event);">
           <option value="" hidden>Select Venue Type</option>
           <option>Theme Restaurant</option>
           <option>Blah restaurant</option>
           <option>Flana Restaurant</option>
           <option>Woops Restaurant</option>
</select>
<script>
function myFunction(event) 
{
  var index_opt = event.target.selectedIndex;
  if ( index_opt > 0 ) 
  {
    var x = document.getElementById("restaurant-form");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
}
</script>