jQuery的形式選擇選項無法在Chrome

工作，我是新來的jQuery和有以下問題：jQuery的形式選擇選項無法在Chrome

我想打一個形式選擇樹。如果我選擇一個選項，另一個選擇出現。此代碼工作正常在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>

來源

2012-03-12 user1264219

選項標記不能有id-attibute。您需要使用value屬性，並處理第一個select的onChange事件以獲取當前選定的值。 – 2012-03-12 13:56:37

你或許應該被綁定到更改事件，然後拉出選擇的價值，而不是結合一個特定的選項。

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

    //... 
});

來源

2012-03-12 13:55:19

嘗試改變事件只有一個事件的選擇

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

}）;

並做好型動物事件中使用$（「＃選擇1」）VAL（）（從選擇返回選擇的值）

來源

2012-03-12 14:03:10

這裏有一個工作示例小提琴：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(); 
    } 
});

來源

2012-03-12 14:05:24

謝謝大家的回覆，我現在就開始工作！ – user1264219 2012-03-12 23:23:56

我簡單和實現這一目標的清潔編碼方法是在你想顯示相應標籤的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>

來源

2012-03-12 15:51:02

jQuery的形式選擇選項無法在Chrome

回答

相關問題