2017-05-06 20 views
0

これは私の最初の投稿です(ここのnoobです)。私は愚かな質問にあなたを侮辱しないと思います。 今私は2番目のドロップダウンを追加しようとしました ..私はこの単純なドロップダウンの例を見つけた私は私のニーズに変更WICH、 はこれまでのところ、私はそれがここにしてくださいworks.look(私は信じて)どのように理解し、正常に動作します テキストの動的ドロップダウンリスト

http://megapeng.com/DynamicDropdown/index.html二つ目は、テキストファイル からデータを取得しません

http://megapeng.com/DynamicDropdown/index1.html

ユーザーが自分のためにリストをカスタマイズできるようにするにはオフラインアクセス を必要として、私は、負荷のtxtバージョンに固執する必要はこちらをご覧下さいニーズ同じフォルダ内にあります)ここでは、2つ目のドロップダウンリストを持つコードがあります。

<!DOCTYPE html> 
<head> 
    <meta charset='UTF-8'> 

    <title>Dynamic Dropdown</title> 

    <link rel='stylesheet' href='css/style.css'> 

    <script src="js/jquery.min.js"></script> 

    <script> 
     $(function() { 

$("#text-one").change(function() { 
$("#text-two").load("textdata/" + $(this).val() + ".txt"); 
});}); 




</script> 
</head> 

<body> 

    <div id="page-wrap"> 

     <h1>&nbsp;</h1> 

     <select id="text-one"style="width: 122px"> 

<option value="base">SELECT</option> 
<option value="standard">STANDARD</option> 
<option value="folk">FOLK</option> 
<option value="windbrass" selected>WIND/BRASS</option> 
<option value="percussion" selected>PERCUSSION</option> 
<option value="strings" selected>STRINGS</option> 
     </select> 

     <br /> 

     <select id="text-two"style="width: 122px"> 
      <option>Choose above</option> 
     </select> 

     <br /> 
    </div> 
     <div id="page-wrap"> 

     <h1>&nbsp;</h1> 

     <select id="text-one"style="width: 122px"> 

<option value="base">SELECT</option> 
<option value="standard">STANDARD</option> 
<option value="folk">FOLK</option> 
<option value="windbrass" selected>WIND/BRASS</option> 
<option value="percussion" selected>PERCUSSION</option> 
<option value="strings" selected>STRINGS</option> 
     </select> 

     <br /> 

     <select id="text-two"style="width: 122px"> 
      <option>Choose above</option> 
     </select> 

     <br /> 
    </div> 


</body> 

</html> 

答えて

0

idの属性を変更してください。これらはドキュメント内で一意である必要があります。 idが重複しているため、2番目の選択肢ペアが機能していません。

idグローバル属性は、ドキュメント全体で固有のID( )を定義します。その目的は、フラグメント識別子を使用してリンクするとき、スクリプトを書くとき、または (CSSを使用するとき)のときに要素 を識別することです。

続きを読むMDNを参照してください。

#idセレクタを使用する代わりに、.classNameセレクタを使用することができます。あなたのコード内

例の変更:

// bad 
$("#text-one") ... 
$("#text-two") ... 
<select id="text-one"> ... 
<select id="text-two"> ... 

//ok 
$(".text-one") ... 
$(".text-two") ... 
// first pair 
<select class="text-one"> ... 
<select class="text-two"> ... 
// second pair 
<select class="text-one"> ... 
<select class="text-two"> ... 
関連する問題