Assign click() to a child control in jquery

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 b开发者_如何学Goy 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?

Using find("#tn") will not work. # is indicative of an id, but you are searching for a value. You need to search for the attribute value.

Assign the click to the select and check is value.

Example:

$("#selectStates").click (function() {
   switch (this.value) {
     case "tx":
       //do something
       break;
     case "ak":
       //do something
       break;
     case "ca":
       //do something
       break;
     case "ws":
       //do something
       break;
     case "tn":
       //do something
       break;
   }
})

You must check the value of the select element and not the option elements. You should also put the click handler on the select element. If you do not do this, the code will not work in IE.

I think you should make a map with elements A and then the state, so Atn, Atx, etc.

Then you can fire the click on the appropriate map element using:

$("#selectStates").click(function() {
   $("#A" + this.value).click();
});

Try it out with this jsFiddle

Note: Ninja Dude pointed out in the comments that .select() doesn't work in this case, so I use .click() like in the OP, since .select() is limited to <input type="text"> fields and <textarea> boxes. The select event is sent to an element when the user makes a text selection inside it.

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.

try

$("option[value=tn]")

because the specific option you are targeting does not have the id="tn"

Are you looking for something like this

$(function() {
  $('#selectStates > *').click(function(e){
    alert('you clicked : ' +this.value);
  });
});

see it in Action