Question

这是我的第一篇文章（noob here）我希望我不会侮辱你一个愚蠢的问题。我找到了这个简单的下拉示例，我修改了我的需求，到目前为止我理解（我相信）它是如何工作的。请在这里查看，

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>

Answer 1

请更改您的id属性，这些属性在文档中必须是唯一的。您有id重复，这就是为什么您的第二对选择不起作用的原因。

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

包含文本的动态下拉列表

1 个答案: