多个 <option> 相互连接答案

【问题标题】：multiple <option> connected with each other多个 <option> 相互连接
【发布时间】：2014-12-27 19:36:39
【问题描述】：

您好，希望您能帮助我解决我的问题。

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

目前看起来像这样：

 <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”，它可能只有一个选项，比如“斜体”。

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

任何帮助将不胜感激！ XX

【问题讨论】：

标签： javascript select option

【解决方案1】：

你可以试试这个。

同样可以根据您的要求添加更多组件。

不过，选项现在是硬编码的，您也可以将其与动态值一起使用。

正如 BadHorsie 所提到的，如果您有多个要链接的选择，则可以使用这些插件。

function update()
{
var sel = document.getElementById("fonts");
var value = sel.options[sel.selectedIndex].value;
 
  if(value=="Arial"){
    document.getElementById("weights").innerHTML = "";
    var newSelect = document.createElement("select");
    newSelect.id = "weightsSelect";
     newSelect[newSelect.length] = new Option("Normal", "Normal", false, false);    
     newSelect[newSelect.length] = new Option("Bold", "Bold", false, false);
     newSelect[newSelect.length] = new Option("Italic", "Italic", false, false);
     document.getElementById('weights').appendChild(newSelect);
     }
  else if(value=="Helvetica")
     {
      document.getElementById("weights").innerHTML = "";
      var newSelect = document.createElement("select");
    
     newSelect[newSelect.length] = new Option("Italic", "Italic", false, false);    
     document.getElementById('weights').appendChild(newSelect);
     }
  else if(value=="Times"){
   
    }
  
}

<select id="fonts" onchange="update(this)">
 <option value="Arial">Arial</option>
 <option value="Helvetica">Helvetica</option>
 <option value="Times">Times</option>
 </select>
<div id="weights"></div>

【讨论】：

【解决方案2】：

这称为链接选择菜单。

如果您的系统相当简单，有很多插件可以为您做到这一点。

例如http://www.appelsiini.net/projects/chained

【讨论】：

【解决方案3】：

你可以使用 jQuery

收听选择的change事件

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

});

在更改事件中，你可以这样做

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

通过这种方式，您知道何时使用第一个选择，当您选择一个选项时，您可以根据您的条件更改第二个选择

【讨论】：