Javascript 多重<；选项>；相互联系

嗨，希望你能帮我回答我的问题

我正在构建一个选项框，我想连接到另一个选项框，其中包含第一个选项中的特定选项。哇，如果听起来很复杂的话，很抱歉

目前看起来是这样的：

 <select id="fonts">
 <option value="Arial"></option>
 <option value="Helvetica"></option>
 <option value="Times"></option>
 </select>

如果选择第一个选项“Arial”，则第二个选项框将具有以下选项：

 <select id="weights">
 <option value="Normal"></option>
 <option value="Bold"></option>
 <option value="Italic"></option>
 </select>

如果你选择“Helvetica”，它可能只有一个选项，比如说“italic”

任何帮助都将不胜感激！

---

Xx

您可以使用jQuery

收听选择的更改事件

$("#myselect1").change(function () {

});

在变更事件中，您可以这样做

$('#myselect2').append($('<option>', {
    value: 1,
    text: 'My option'
}));

$（'#myselect2'）。附加（$（''）{
价值：1，
文本：“我的选择”
}));

---

通过这种方式，您可以知道何时使用第一个选择，并且当您选择一个选项时，您可以根据您的条件更改第二个选择，这称为链接选择菜单

如果你的系统相当简单的话，有很多插件可以帮你做到这一点

e、 你可以试试这个

同样，根据您的需求，您可以添加更多组件

但是，选项现在已被编码，您也可以将其用于动态值

同样正如BadHorsie提到的，如果你有多个选择链接，你可以选择那些插件

函数更新（）
{
var sel=document.getElementById（“字体”）；
var value=sel.options[sel.selectedIndex].value；
如果（值==“Arial”）{
document.getElementById（“权重”）.innerHTML=“”；
var newSelect=document.createElement（“选择”）；
newSelect.id=“权重选择”；
newSelect[newSelect.length]=新选项（“正常”、“正常”、假、假）；
newSelect[newSelect.length]=新选项（“粗体”、“粗体”、“假”、“假”）；
newSelect[newSelect.length]=新选项（“斜体”、“斜体”、“假”、“假”）；
document.getElementById（'weights'）.appendChild（newSelect）；
}
else if（值=“Helvetica”）
{
document.getElementById（“权重”）.innerHTML=“”；
var newSelect=document.createElement（“选择”）；
newSelect[newSelect.length]=新选项（“斜体”、“斜体”、“假”、“假”）；
document.getElementById（'weights'）.appendChild（newSelect）；
}
else if（值=“次”）{
}
}

Arial
赫尔维蒂卡
时代

$('#myselect2').append($('<option>', {
    value: 1,
    text: 'My option'
}));