在连接下拉列表中使用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的价值

回答

相关问题