在連接下拉列表中使用selectIndex的價值

我想要做的基礎上，選擇指數的值更改框的.innerHTML：在連接下拉列表中使用selectIndex的價值

<!DOCTYPE html> 
<html> 

<head> 
<title>test</title> 
<script src="test.js"></script> 
<link rel="stylesheet" type="text/css" href="test.css"> 
</head> 

<body> 
<form> 
    <select id="slct1" name="slct1" onChange="populate(this.id, 'slct2')"> 
     <option val=""></option> 
     <option val="Chevy">Chevy</option> 
     <option val="Dodge">Dodge</option> 
     <option val="Ford">Ford</option> 
    </select> 
</form> 
<hr /> 
<form> 
    <select id="slct2" name="slct2" onchange=handleSelect(this.form);></select> 
</form> 

<div id="box"></div> 
</body> 

</html>

這裏是JavaScript：

function populate(s1, s2) { 
    var s1=document.getElementById(s1); 
    var s2=document.getElementById(s2); 
    s2.innerHTML = ""; 
    if (s1.value == "Chevy") { 
     var optionArray = ["|", "camaro | Camaro", "corvette | Corvette", "impala | Impala"]; 
    } 
    else if (s1.value == "Dodge") { 
     var optionArray = ["|", "avenger | Avenger", "challenger | Challenger", "ram | Ram"]; 
    } 
    else if (s1.value == "Ford") { 
    var optionArray = ["|", "f150 | F150", "taurus | Taurus", "mustang | Mustang"]; 
} 
for (var option in optionArray) { 
    var pair = optionArray[option].split("|"); 
    var newOption = document.createElement("option"); 
    newOption.value = pair [0]; 
    newOption.innerHTML = pair[1]; 
    s2.options.add(newOption); 
} 
}; 
var handleSelect = function (flight1) { 
    var e = document.getElementById("slct2"); 
    var strUser = e.options[e.selectedIndex].value; 
    if (strUser == "") { 
    document.getElementById("box").innerHTML = ""; 
} 
else if (strUser == "camaro") { 
    document.getElementById("box").innerHTML = "Good"; 
} 
else if (strUser == "corvette") { 
    document.getElementById("box").innerHTML = "Better"; 
} 
else if (strUser == "impala") { 
    document.getElementById("box").innerHTML = "Great"; 
    } 
    if (strUser == "") { 
     document.getElementById("box").innerHTML = ""; 
    } 
    else if (strUser == "avenger") { 
     document.getElementById("box").innerHTML = "Good"; 
    } 
    else if (strUser == "challenger") { 
     document.getElementById("box").innerHTML = "Better"; 
    } 
    else if (strUser == "ram") { 
     document.getElementById("box").innerHTML = "Great"; 
    } 
    if (strUser == "") { 
     document.getElementById("box").innerHTML = ""; 
    } 
    else if (strUser == "f150") { 
     document.getElementById("box").innerHTML = "Good"; 
    } 
    else if (strUser == "taurus") { 
     document.getElementById("box").innerHTML = "Better"; 
    } 
    else if (strUser == "mustang") { 
     document.getElementById("box").innerHTML = "Great"; 
    } 
};

我可以更改id =「box」的innerHTML，但我需要做的是根據selectedindex的值更改box的innerhtml。我認爲這個問題與我的下拉菜單相互連接有關。謝謝！

來源

2015-05-19 alscxc

從我看到你只有一個小小的錯誤。在你的select2中，你的值有空格，所以當你比如驗證strUser比如「corvette」時，它會返回false，因爲value實際上是「corvette」。你可以做的是從JavaScript的用戶trim（）函數。像這樣

var strUser = e.options[e.selectedIndex].value.trim();

這將刪除所選字符串開頭和結尾的空格，並且應該正確驗證。

來源

2015-05-19 16:52:27

是的，或者可以在定義中（在這些管道周圍）刪除空白。 –

謝謝謝謝謝謝謝謝！擺脫管道周圍的空白處固定它！你搖滾！ – alscxc

在連接下拉列表中使用selectIndex的價值

回答

相關問題