Question

I have the following html element

<select id="selectStates" size="5" multiple="multiple" class="box">
    <option value="tx">Texas</option>
    <option value="ak">Alaska</option>
    <option value="ca">California</option>
    <option value="ws">Washington</option>
    <option value="tn">Tennessee</option>
</select>

And I have a <map>. It has 50 elements with ID’s for starting from A0, A1, A2… A50 as following: (

extra line” href=”#” coords=”51,15,52,15,52,16,53,16,. . ” />

I already have click event in a js file, which highlights the state when i click on it.

Now I want to highlight that particular state area in map when I click that state in a list box.

Right am trying to do as follows by assigning the click event of that state to a particular in

$('#selectStates').find('#tn').click(function(e){
            $('#A51').click();
            });

But this doesn’t seem to work.
Can anyone please help me?

Answer 1

you can do:

$("#selectStates").find("[value=tn]").select(function() {
   $("#A51").click()
})

better however, is this:

<select>
 <option value="tn" data-click-div="A51">TN</option>
</select>

single handler now:

$("#selectStates").change(function(evt) {
   var obj = "#" + jQuery(this).attr("data-click-div");
   jQuery(obj).click();
});

what I did here is add an attribute to the option to say which div to click. Everything, then, is done.