帶文本的動態下拉列表

這是我的第一篇文章（noob here）我希望我不要侮辱你一個愚蠢的問題。我發現這個簡單的下拉例子至極我修改了我的需求，到目前爲止，我瞭解（我相信）它是如何works.look這裏請，帶文本的動態下拉列表

http://megapeng.com/DynamicDropdown/index.html 工作正常.. 現在我嘗試添加第二個下拉看到這裏請

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

第二個沒有得到從文本文件我要堅持到負載TXT版本的用戶需要離線訪問能夠自定義列表中的數據的需要（與...一切在同一個文件夾中），這裏是第二個下拉列表的代碼，這是行不通的。如果你拿出一個，它的工作完美無瑕。

<!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>

來源

2017-05-06 mumu

請更改您的id屬性，這些屬性在文檔中必須是唯一的。您有重複id s這就是爲什麼你的第二對選擇不起作用。

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"> ...

來源

2017-05-06 15:43:25 loelsonk

帶文本的動態下拉列表

回答

相關問題