Question

最近我一直在做一些项目。它是一个用HTML构建的单个页面，还包含几个JS元素。

我在页面中使用了几个列表。问题是我有一个依赖列表，这意味着在从主列表中选择值后，第二个列表显示相关项目。一切顺利，但在同一页面我必须添加相同的依赖列表。列表完全相同，只是它位于此页面的另一部分。

Tee问题是当我从第一个依赖列表中选择某个东西时，它会影响位于其他部分的第二个依赖列表。当我从第二个依赖列表中选择值时，没有任何反应。

我更改了第二个列表的名称，但没有结果。

我在这里发布了页面中第一个列表的示例代码，依赖列表的JS代码。

你能帮我解决这个问题吗？我们的想法是在单个HTML页面的不同部分显示相同的列表，但这两个列表应该独立工作。

正文部分的HTML页面中的代码：

      <select id="list" name="optone" size="1"
    onchange="setOptions(document.dependant_list.optone.options
    [document.dependant_list.optone.selectedIndex].value);">
    <option value=" " selected="selected"> </option>
    <option value="01 00 - Option 1">01 00 - Option 1</option>
    <option value="01 00 - Option 2">01 00 - Option 2</option>
    <option value="01 00 - Option 3">01 00 - Option 3</option>
    <option value="01 00 - Option 4">01 00 - Option 4</option>
    <option value="01 00 - Option 5">01 00 - Option 5</option>

</select>


<select id="list" name="opttwo" size="1">
<option value=" " selected="selected">Please, choose from main list first</option>
</select>

JS代码，在我的案例中位于外部源：

function setOptions(chosen) {
var selbox = document.dependant_list.opttwo;

selbox.options.length = 0;
if (chosen == "01 00 - Option 1") {
  selbox.options[selbox.options.length] = new
Option('Dependent value 1');
  selbox.options[selbox.options.length] = new
Option('Dependent value 2');
  selbox.options[selbox.options.length] = new
Option('Dependent value 3');
}
if (chosen == "02 00 - Option 2") {
  selbox.options[selbox.options.length] = new
Option('Dependent value 4');
}
if (chosen == "03 00 - Option 3") {
  selbox.options[selbox.options.length] = new
Option('Dependent value 5');
}
if (chosen == "04 00 - Option 4") {
  selbox.options[selbox.options.length] = new
Option('Dependent value 6');
}
if (chosen == "05 00 - Option 5") {
  selbox.options[selbox.options.length] = new
Option('Dependent value 7');
}

}

如果需要任何其他详细信息，请写信。

更新

<DIV ID="services"

 <select class="list" name="optone" size="1"
    onchange="setOptions(document.dependant_list.optone.options
    [document.dependant_list.optone.selectedIndex].value);">
    <option value=" " selected="selected"> </option>
    <option value="01 00 - Option 1">01 00 - Option 1</option>
    <option value="01 00 - Option 2">01 00 - Option 2</option>
    <option value="01 00 - Option 3">01 00 - Option 3</option>
    <option value="01 00 - Option 4">01 00 - Option 4</option>
    <option value="01 00 - Option 5">01 00 - Option 5</option>

</select>

 <select class="list" name="opttwo" size="1">
    <option value=" " selected="selected">Please, choose from main list first</option>
    </select>


</div>




<div id="fraud">

 <select class="list" name="optone" size="1"
    onchange="setOptions(document.dependant_list.optone.options
    [document.dependant_list.optone.selectedIndex].value);">
    <option value=" " selected="selected"> </option>
    <option value="01 00 - Option 1">01 00 - Option 1</option>
    <option value="01 00 - Option 2">01 00 - Option 2</option>
    <option value="01 00 - Option 3">01 00 - Option 3</option>
    <option value="01 00 - Option 4">01 00 - Option 4</option>
    <option value="01 00 - Option 5">01 00 - Option 5</option>


 <select class="list" name="opttwo" size="1">
    <option value=" " selected="selected">Please, choose from main list first</option>
    </select>

</select>

</div>

正如您所看到的那些列表位于不同的DIV中，但它们是相同的，在将ID更改为CLASS之后，它们仍然相互混淆：（

Answer 1

这里的错误很简单 - ID应该是唯一的 - 因此每页只留下一个。

对于像这样的多个实例，您应该使用类而不是ID - 将id =“list”更改为class =“list”（以及附加的CSS）。

将几个依赖列表添加到单个HTML页面

1 个答案: