Javascript 带文本的动态下拉列表_Javascript_Jquery_Html

Javascript 带文本的动态下拉列表

javascript jquery html

Javascript 带文本的动态下拉列表,javascript,jquery,html,Javascript,Jquery,Html,我发现了这个简单的下拉示例，我根据自己的需要对其进行了修改，到目前为止，我理解（我相信）它是如何工作的很好。。现在我尝试添加第二个下拉列表，请看这里第二个没有从文本文件中获取数据我需要坚持加载txt版本，因为用户需要脱机访问为了能够根据他们的需要定制列表（同一文件夹中的所有内容），这里是第二个dropdownlist的代码，它不起作用。如果你取出其中一个，它就会完美无瑕 <!DOCTYPE html> <head> <meta charset=

我发现了这个简单的下拉示例，我根据自己的需要对其进行了修改，到目前为止，我理解（我相信）它是如何工作的

很好。。现在我尝试添加第二个下拉列表，请看这里

第二个没有从文本文件中获取数据我需要坚持加载txt版本，因为用户需要脱机访问为了能够根据他们的需要定制列表（同一文件夹中的所有内容），这里是第二个dropdownlist的代码，它不起作用。如果你取出其中一个，它就会完美无瑕

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


动态下拉列表
$（函数（）{
$（“#文本一”）.change（函数（）{
$（“#text two”）.load（“textdata/”+$（this.val（）+”.txt”）；
});});
挑选
标准
民间的
风/黄铜
打击乐器
串


选择上面的


挑选
标准
民间的
风/黄铜
打击乐器
串


选择上面的

请更改您的

id

属性，这些属性在文档中必须是唯一的。您有重复的

id

s，这就是您的第二对选择不起作用的原因

id全局属性定义一个唯一标识符（id），该标识符必须是在整个文档中是唯一的。其目的是识别元素链接（使用片段标识符）、编写脚本或设置样式时（使用CSS）

阅读更多关于

您可以使用

.className

选择器，而不是使用

#id

选择器

代码中的更改示例：

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

//坏的
$（“#文本一”）。。。
$（“#文本二”）。。。
...
...
//嗯
$（“.text one”）。。。
$（“.text二”）。。。
//第一对
...
...
//第二对
...
...