Question

希望你能帮助我解决我的问题。

我正在构建一个选项框，我希望将其连接到另一个选项框，其中包含第一个选项的特定选项。如果听起来很复杂，那真是太遗憾了。

目前看起来像这样：

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

如果我们说你选择第一个选项＆＃34; Arial＆＃34;第二个选项框将具有以下选项：

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

如果你选择＆＃34; Helvetica＆＃34;它可能只有一个选项可以说＆＃34;斜体＆＃34;。

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

任何帮助将不胜感激！ XX

Answer 1

这称为链接选择菜单。

如果您的系统相当简单，有许多插件可以为您执行此操作。

e.g。 http://www.appelsiini.net/projects/chained

Answer 2

您可以使用 jQuery

收听选择

的更改事件

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

});

在更改事件中，您可以执行类似此操作

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

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

Answer 3

你可以试试这个。

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

然而，选项是右括号，你也可以使用动态值。

正如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>

多个<option>相互连接</option>

3 个答案: