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

onclick is not supported on option tag，您需要将事件监听器添加到select而不是

document.querySelector( "select[id]" ).addEventListener( "change", myFunction );

在myFunction方法中，您可以根据选择的option来显示/隐藏表单。

function myFunction(event) 
{
  var selection = event.target.selectedIndex;
  var x = document.getElementById("restaurant-form");
  x.style.display = selection >= 1 ? "block" : "none";
}

<强>演示

function myFunction(event) 
{
  var selection = event.target.selectedIndex;
  var x = document.getElementById("restaurant-form");
  x.style.display = selection >= 1 ? "block" : "none";
}

document.querySelector( "select[id]" ).addEventListener( "change", myFunction );

<div class="col-lg-10">
  <div class="form-group">
    <select class="form-control" id="" >
           <option value="">Select Venue Type</option>
           <option>Theme Restaurant</option>
           <option>Blah restaurant</option>
           <option>Flana Restaurant</option>
           <option>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>

Answer 2

是的，根据 @ gurvder372 ，您无法使用onclick选项。您也可以使用内联事件分配，例如：

ip link

javascript hide / show功能不起作用

2 个答案: