Search code examples
javascripthtmllistmenuselectedindex

Using value of selectIndex in connected drop down list

What I want to do is change the .innerHTML of the box based on the value of the selected index:

<!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>

Here is the 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";
    }
};

I am able to change the innerHTML of the id="box" but what I need to do is change the innerhtml of the box based on the value of the selectedindex. I think the problem is related to the fact that my drop down menus are connected to each other. Thanks!

Solution

  • From what I see you've got only one tiny mistake. In your select2, there are whitespace in your value, so when you're validating strUser against "corvette" for example, it returns false because value is actually "corvette ". What you could do is user trim() function from javascript. Like this

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

    This will remove whitespace from beginning and end of your selected string and should validate properly.