JQuery如何基於選定的選項標籤生成更多表單域

Question

我正在構建一個web表單，我希望能夠允許用戶從下拉菜單中選擇一個選項，並根據他們選擇哪個值，包含div將生產更多與該選項相關的領域。我用另一個項目的單個選項成功實現了此代碼。我回收了這個項目的代碼並對其進行了修改以適應多種選擇，但到目前爲止，我還沒有成功運行正在運行的產品。

下面是我一直在用來說明我的觀點的一些源代碼。

jQuery腳本

$(document).ready(function(){ 
      $("#more_info_bus").hide(); 
      $("#more_info_bus").attr("disabled", "disabled"); 
      $("#more_info_train").hide(); 
      $("#more_info_train").attr("disabled", "disabled"); 
      $("#more_info_tram").hide(); 
      $("#more_info_tram").attr("disabled", "disabled"); 

      $("#transport_type").change(function(){ 
          var val = $(this).val; 
          $("#more_info_bus input").attr("enabled",(val=="Bus")?"":"enabled"); 
          (val=="Bus")?$("#more_info_bus").show():$("#more_info_bus").hide(); 

          $("#more_info_train input").attr("enabled",(val=="Train")?"":"enabled"); 
          (val=="Train")?$("#more_info_train").show():$("#more_info_train").hide(); 

          $("#more_info_tram input").attr("enabled",(val=="Tram")?"":"enabled"); 
          (val=="Tram")?$("#more_info_tram").show():$("#more_info_tram").hide(); 
        }); 

      }); 

HTML代碼（縮短到兩個div，而不是所有的選項，但你的想法

<label>Is the venue accessible by public transport via:</label> <br /> 
    <select name="transport_type" id="transport_type"> 
      <option disabled selected>Please select a transport type...</option> 
      <option value="Bus">Bus</option> 
      <option value="Train">Train</option> 
      <option value="Tram">Tram</option> 
      <option value="Taxi">Taxi</option> 
      <option value="Other">Other</option> 
    </select> <br /> <br /> 

    <!--HIDDEN DIVS THAT WILL APPEAR UPON SELECTION OF THE VALUES IN THE SELECT ABOVE --> 

    <div id="more_info_bus"> 
      <label>Bus: Frequency of service</label> 
        <input type="text" name="bus_freq" value="<?php echo $results['bus_freq']; ?>"/><br /> 

      <label>Bus: route numbers(s)</label> 
        <input type="text" name="bus_routes" value="<?php echo $results['bus_routes'];?>"/> <br /> 

      <label>Bus: Distance from stop to venue (in meters)</label> 
        <input type="text" name="bus_dist" value="<?php echo $results['bus_dist'];?>"/> <br /> 

      <label>Bus: How accessible is the route from stop to venue?</label> 
        <textarea cols="50" rows="2" name="bus_access"><?php echo $results['bus_access'];?></textarea> <br /> 
    </div> 

    <div id="more_info_train"> 
      <label>Train: Frequency of service</label> 
        <input type="text" name="train_freq" value="<?php echo $results['bus_freq']; ?>"/><br /> 

      <label>Train: route numbers(s)</label> 
        <input type="text" name="train_routes" value="<?php echo $results['bus_routes'];?>"/> <br /> 

      <label>Train: Distance from stop to venue (in meters)</label> 
        <input type="text" name="train_dist" value="<?php echo $results['bus_dist'];?>"/> <br /> 

      <label>Train: How accessible is the route from stop to venue?</label> 
        <textarea cols="50" rows="2" name="train_access"><?php echo $results['bus_access'];?></textarea> <br /> 
    </div> 

有誰知道爲什麼我的div部分留隱患？當用戶選擇每個div的相應值時不會出現。

Answer 1

var val = $(this).val; 

.val（）是一個函數，所以現在typeof val === 'function'。 您必須使用：

var val = $(this).val();