Question

我是Jquery的新手并且遇到以下问题：

我想创建一个表单选择树。如果我选择一个选项，则显示另一个选项。这段代码在Firefox和IE中运行良好，但在Chrome中不行。

Jquery代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('#upgrade').click(function(){
           $('#showupgrade').show(1000);
           $('#showsysteem').hide();
           $('#shownetwerk').hide();
        });
        $('#system').click(function(){
           $('#showsysteem').show(1000);
           $('#showupgrade').hide();
           $('#shownetwerk').hide();
        });
        $('#choice').click(function(){
            $('#showsysteem').hide();
            $('#showupgrade').hide();
            $('#shownetwerk').hide();
        });
        $('#network').click(function(){
           $('#showsysteem').hide();
           $('#showupgrade').hide();
           $('#shownetwerk').show(1000);
        });
    });
    </script>

**HTML code:**

<td>
<select name="choice1[]">
<option id="choice" selected="selected">Maak uw keuze</option>
<option id="upgrade">PC upgrade</option>
<option id="system">Systeem</option>
<option id="network">Netwerk</option>
</select></td>
<td>
<select name="choice2[]" id="showupgrade" style="display: none;">
    <option>Upgrade Set</option>
    <option>Nieuwe voeding</option>
    <option>Intern geheugen</option>
</select>
</td>
<td>
<select name="choice3[]" id="showsysteem" style="display: none;">
    <option>APK</option>
    <option>Virus verwijderen</option> 
</select>
</td>
<td>
<select name="choice4[]" id="shownetwerk" style="display: none;">
    <option>Wi-Fi</option>
    <option>Netwerk installatie</option>    
</select>

</td>

Answer 1

您可能应该绑定到更改事件，然后提取所选值而不是绑定到特定选项。

$("#idofparent").change(function() {
     var selected = $(this).val();
     if (selected === "upgrade") {
         $('#showupgrade').show(1000);
         $('#showsysteem').hide();
         $('#shownetwerk').hide();
     }

     //...
});

Answer 2

尝试仅为选择

更改一个事件的事件

$('#choice1').change(function(){
         if($('#choice1').val()=='upgrade'){
           $('#showupgrade').show(1000);
           $('#showsysteem').hide();
           $('#shownetwerk').hide();
        }
        else if ($('#choice1').val()=='system'){
         ....
}
....

}）;

使用$（'＃choice1'）创建不同事件.val（）（从选择中返回选定的值）

Answer 3

这是一个工作示例的小提琴：http://jsfiddle.net/6wnnV/

javascript可缩短为：

// #mainselect is the id for the first select you used
$('#mainselect').change(function() {

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

    if (id === '') {
        $('select').not('#mainselect').hide();
    } else {
        $('#' + id).show(1000);

        $('select').not('#mainselect, #' + id).hide();
    }
});

Answer 4

我更简单，更简洁的实现方法是在主要的每个项目中添加一个值=“”，与您希望显示的相应标签的ID相匹配。您可以在此处查看工作代码：http://jsfiddle.net/helpinspireme/HYkk3/1/

    <script>
    $('#mainselect').change(function() {
      var id = $(this).val();
      if (id === 'makeChoice') {
         $('select').not('#mainselect').hide();
      } else {
         $('#' + id).show();
         $('select').not('#mainselect, #' + id).hide();
      }
    });
    </script>
    <body>
      <td>
      <select id="mainselect" name="choice1">
         <option value="makeChoice" selected="selected">Make a Choice</option>
         <option value="pcUpgrade">PC upgrade</option>
         <option value="system">System</option>
         <option value="network">Network</option>
      </select>
      </td>
      <td>
      <select name="pcUpgrade" id="pcUpgrade" style="display: none;">
         <option>Upgrade Set</option>
         <option>Nieuwe voeding</option>
         <option>Intern geheugen</option>
      </select>
      </td>
      <td>
      <select name="choice3" id="system" style="display: none;">
         <option>APK</option>
         <option>Virus verwijderen</option> 
      </select>
      </td>
      <td>
      <select name="choice4" id="network" style="display: none;">
         <option>Wi-Fi</option>
         <option>Netwerk installatie</option>    
      </select>
      </td>
      </body>

Jquery表单选择选项不在chrome中工作

4 个答案: