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

can you show the actual HTML code, it's not clear by what you wrote above what you're trying to do. — Anatoly G
– Anatoly G, Commented Oct 19, 2010 at 16:37
What do this click handlers for A0 - A50 look like? .click() will only fire handlers you made, not the default functionality. — Peter Ajtai
– Peter Ajtai, Commented Oct 19, 2010 at 16:41
If it's states don't you mean A0 - A49 for 50 states ---- or is it A1 - A50? — Peter Ajtai
– Peter Ajtai, Commented Oct 19, 2010 at 17:21
Rocky, PLEASE use the code block to show your code. It's impossible to read without it. — Anatoly G
– Anatoly G, Commented Oct 19, 2010 at 19:04

user372743 · Accepted Answer · 2010-10-19 16:38:05Z

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.

answered Oct 19, 2010 at 16:38

user372743

Sign up to request clarification or add additional context in comments.

Comments

John Hartsock · Accepted Answer · 2010-10-19 18:10:57Z

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

edited Oct 19, 2010 at 18:10

answered Oct 19, 2010 at 16:37

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

5 Comments

Peter Ajtai Over a year ago

This seems quite painful (I'm assuming 50 states).

John Hartsock Over a year ago

@Peter what do you want the click event to do? are they different for each state or the same for all?

Peter Ajtai Over a year ago

OP seems a little unclear on it. It sounds like there are 50 map elements with ids A0 - A49. This is why I suggested renaming the map elements. ---- This will definitely work, and +1 for clarifying that the value should taken from the select and not the option ----------------------- I would suggest ` switch (this.value) {`

John Hartsock Over a year ago

@Peter...I get the suggestion of using this.value but since it is a select element and this references the DOM object wouldn't it be this.options(this.selectedIndex).value

Peter Ajtai Over a year ago

In that context, $("#selectStates").val() is exactly the same as $(this).val() which is a jQuery method that simply fetches this.value, so you might as well use this.value instead of running around the block once before fetching it. -------- In $("#selectStates").click..., $(this) is the jQuery object $("#selectStates") and this is the DOM element with the id selectStates.

Peter Ajtai · Accepted Answer · 2010-10-19 18:20:58Z

1

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.

edited Oct 19, 2010 at 18:20

answered Oct 19, 2010 at 16:47

Peter Ajtai

57.8k13 gold badges124 silver badges143 bronze badges

1 Comment

Peter Ajtai Over a year ago

@Ninja - Yes, but it looks like click does work. .select() is limited to <input type="text"> fields and <textarea> boxes.

Anatoly G · Accepted Answer · 2010-10-19 17:14:40Z

0

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.

edited Oct 19, 2010 at 17:14

answered Oct 19, 2010 at 16:40

Anatoly G

4,1522 gold badges23 silver badges23 bronze badges

9 Comments

Anatoly G Over a year ago

I thought that's what he wanted to do - when TN is selected, click A51

Peter Ajtai Over a year ago

Maybe you're right, but OP says there's a map from A0 to A50, so I assumed OP wants the corresponding A-- to fire.... It is unclear from the example.

Anatoly G Over a year ago

yeah, I know, it's not the best question out there, for sure.

chuckyCheese Over a year ago

The following seems to work in firefox: $("#selectStates").find("[value=tn]").select(function() { $("#A51").click() })

chuckyCheese Over a year ago

The following seems to work in firefox but not in IE: $("#selectStates").find("[value=tn]").select(function() { $("#A51").click() }) ... IS THERE ANY PARTICULAR REASON?

|

dvhh · Accepted Answer · 2010-10-19 16:39:38Z

0

try

$("option[value=tn]")

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

answered Oct 19, 2010 at 16:39

dvhh

4,73829 silver badges34 bronze badges

1 Comment

Peter Ajtai Over a year ago

This will not work in IE if you check for the value with this.value, since the select element gets the value.

user372551 · Accepted Answer · 2010-10-19 16:45:25Z

0

Are you looking for something like this

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

see it in Action

answered Oct 19, 2010 at 16:45

user372551

4 Comments

Peter Ajtai Over a year ago

$(#selectStates option)" is a little more descriptive.

user372551 Over a year ago

well, I don't think > * isn't bad. Basically a select tag consists of option tags, so this selector > * aims at option elements only, afaik :)

Peter Ajtai Over a year ago

Additionally, the option elements should not be getting a click handler, since the value is assigned to the select element. The above will not work in IE due to this.

user372551 Over a year ago

sorry, bit sleepy. will test it latter. have a Good day !! BTW I had an exam tomorrow, plz wish me best of luck.Thanks :)

Collectives™ on Stack Overflow

Assign click() to a child control in jquery

6 Answers 6

Comments

5 Comments

Try it out with this jsFiddle

1 Comment

9 Comments

1 Comment

see it in Action

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

5 Comments

1 Comment

9 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related