クロールでJqueryフォームの選択オプションが機能しない

Jqueryを初めて使用していて、次の問題があります。クロールでJqueryフォームの選択オプションが機能しない

フォームの選択ツリーを作成します。 1つのオプションを選択すると、別の選択が表示されます。このコードは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属性を使用し、最初の選択のonChangeイベントを処理して、現在選択されている値を取得する必要があります。 –

あなたはおそらく変更イベントに結合し、選択した値を引き出すのではなくに結合されなければなりません特定のオプション。

$("#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'){ 
     .... 
} 
....

}）のための唯一のイベントのためのイベントを変更してください。。

と$（ '＃のchoice1'）を使用して貴様のイベントを作るの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

私は単純で、これを達成するための符号化方法をきれいにすることで、表示したい対応するタグの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フォームの選択オプションが機能しない

答えて

関連する問題