CODEWITHSUNDEEP
javascripthtmlcombobox
user1184815
user1184815

Reputation: 3

Javascript combobox

I have a combobox that gives me 3 options, and when you go to the option if gives me an image outside of the options box. What I want to do is be able to show html instead of an image.

function display_map(mapid) {
    println(mapid);
    if (mapid == "ireland_map") {
        document.getElementById('ireland_map').style.display = "block";
        document.getElementById('africa_map').style.display = "none";
        document.getElementById('america_map').style.display = "none";
    }
    else if (mapid == "africa_map") {
        document.getElementById('ireland_map').style.display = "none";
        document.getElementById('africa_map').style.display = "block";
        document.getElementById('america_map').style.display = "none";
    } else if (mapid == "america_map") {
        document.getElementById('ireland_map').style.display = "none";
        document.getElementById('africa_map').style.display = "none";
        document.getElementById('america_map').style.display = "block";
    }
    else {
        document.getElementById('ireland_map').style.display = "none";
        document.getElementById('africa_map').style.display = "none";
        document.getElementById('america_map').style.display = "none";
    }
}​

<select name="#" id="map_select" onChange="display_map('freddy');">
      <option selected="selected"></option>
      <option id="ireland_map">ireland</option>
      <option id="africa_map">africa</option>
      <option id="america_map">america</option>
</select>

<div id="ireland_map" style="display:none;"> hey, 1 works </div>
<div id="africa_map" style="display:none;"> hey, 2 works </div>
<div id="america_map" style="display:none;"> hey, 3 works </div>​

Upvotes: 0

Views: 2822

Answers (1)

jbabey
jbabey

Reputation: 46647

You have the same IDs on your divs as well as your options. This is why it is not working.

http://jsfiddle.net/jbabey/z9Jct/

Upvotes: 1

Related Questions