Assign click() to a child control in jquery

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

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;
   }
})

Answer 2

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.

Answer 3

try

$("option[value=tn]")

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

Answer 4

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.

Answer 5

Are you looking for something like this

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

see it in Action

Answer 6

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.