multiple <option>互相連接

Question

嗨，希望你能幫助我解決我的問題。

我正在構建一個選項框，我想將其連接到另一個選項框，其中包含第一個選項的特定選項。如果聽起來很複雜，對不起。

它目前看起來是這樣的：

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

，如果讓我們說你選擇了第一個選項「宋體」第二個選擇框將有以下選擇：

<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

Answer 1

您可以使用jQuery的

聽的變化事件的選擇

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

}); 

在改變事件，你可以做這樣的事情

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

In thi你知道什麼時候使用第一個選擇，當你選擇一個選項時，你可以根據你的標準改變第二個選擇

Answer 2

這叫做鏈接選擇菜單。

有很多插件可以爲你做到這一點，如果你的系統非常簡單。

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

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>