带文本的动态下拉列表

这是我的第一篇文章（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

带文本的动态下拉列表

回答

相关问题