如何嵌套使用javascript的另一選擇的內部選擇？

Question

的Html犯規讓接下來要做的：

<script> 
    function openwindow(){ 
    document.getElementById("a").innerHTML = "<select><option>etc</option> 
</select>" 
    } 
</script> 

<select onmouse = "openwindow()"> 
    <option id = "a" value = "a">A   
    </option> 
</select> 

所以basiclly內的另一個選擇選擇什麼即時試圖做的是另一種嵌套。

顯然這不能做到這一點，是否有人有一個想法如何做到這一點，或者如果我使用類似jQuery的東西（我不是familliar與它）如何做到這一點？

謝謝。

我無法找到一個解釋它的最好方式，但你可以看到，每個類別有子類別的選項。

Answer 1

只有沒有onmouse事件。您可以使用onmouseover或this page上的鼠標事件類別。

Answer 2

您不能將<select>附加到<select>，因爲這樣做會導致invalid markup。

要單獨出你的不同類型的內容，你可以利用的<optgroup>：

<select> 
 
    <optgroup label="Swedish Cars"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    </optgroup> 
 
    <optgroup label="German Cars"> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </optgroup> 
 
</select>

，或者，你可以建立一個新<select>在用戶選擇特定選項時框。在下面的例子中，選擇Mercedes將創建一個二次選擇框可供選擇奔馳模型：

//Create array of options to be added 
 
var array = ["Mercedes 1","Mercedes 2","Mercedes 3","Mercedes 4"]; 
 

 
//Create and append select list 
 
var selectList = document.createElement("select"); 
 
selectList.id = "mySelect"; 
 
var target = document.getElementById('new'); 
 

 

 
//Create and append the options 
 
for (var i = 0; i < array.length; i++) { 
 
    var option = document.createElement("option"); 
 
    option.value = array[i]; 
 
    option.text = array[i]; 
 
    selectList.appendChild(option); 
 
} 
 

 
var selection = document.getElementsByTagName('select')[0]; 
 
selection.onclick = function() { 
 
    if (selection.value == 'mercedes') { 
 
    target.appendChild(selectList); 
 
    } 
 
}

<select> 
 
    <optgroup label="Swedish Cars"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    </optgroup> 
 
    <optgroup label="German Cars"> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
    </optgroup> 
 
</select> 
 

 
<div id="new"></div>

希望這有助於！ :)

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.