Jquery表单选择选项在chrome中不起作用答案

【问题标题】：Jquery form select option not working in chromeJquery表单选择选项在chrome中不起作用
【发布时间】：2012-03-13 00:26:27
【问题描述】：

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

【问题讨论】：

选项标签不能有 id 属性。您需要改用 value 属性并处理第一次选择的 onChange 事件以获取当前选择的值。

标签： jquery google-chrome

【解决方案1】：

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

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

     //...
});

【讨论】：

【解决方案2】：

尝试将事件更改为仅选择一个事件

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

});

并使用 $('#choice1').val() 制作不同的事件（从选择中返回选定的值）

【讨论】：

【解决方案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();
    }
});

【讨论】：

【解决方案4】：

我实现这一点的更简单和干净的编码方式是在主目录中添加一个 value="" 到与您希望显示的相应标签的 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>

【讨论】：