0

this works great in FF but not in IE, Chrome or Safari.

$('#countryDropDown option').click(function() {
   var countryID = $(this).val();
   dostuff();
});
// countryDropDown = id of select

So, as you can see I want to attach a click event to each option.

I alos tried 

var allOpts = $('#countryDropDown option'),
   l = allOpts.length,
   i = 0;

for (i = 0; i < l; i += 1) {
    $(allOpts[i]).click(function() {
        var countryID = $(this).val();
        doStuff();
    });
}

It still does not want to work in any other browser but FF. What am I doing wrong? Thanks

patad
  • 8,484
  • 11
  • 35
  • 44

3 Answers3

2

The question is if you really need to do it this way. I bet you don't need access to the option element, so you also could use .change():

var countryID;

$('#countryDropDown').change(function() {
   countryID = $(this).val();
   dostuff();
});

Update:

According to the documentation, .val() should work, but if it does not for whatever reason, do this:

var countryID;
$('#countryDropDown').change(function() {
   countryID = $('option:selected', this).val();
   dostuff();
});

Update2:

I don't know if it is relevant (I think it should work nevertheless) but could it be that your option elements don't have a value attribute, likes so:

<option>Foo</option>

If so you should try .text() instead of .val().

$('option:selected', this).text();
Felix Kling
  • 756,363
  • 169
  • 1,062
  • 1,111
  • why don't you think I need access to the option element? I need to get the value out of it... is there any other way? maybe get the value of the select box which will get the selected options value? – patad May 12 '10 at 10:22
  • @meow - `$(this).val()`, in the context of a select element, gets the selected option's value. This is correct. – karim79 May 12 '10 at 10:24
  • @meow: Yes that is exactly what I posted. The value of a `select` element is the current selected option. You are not manipulating the `option` element, that is what I meant that you probably don't need access to it. – Felix Kling May 12 '10 at 10:25
  • @meow: I doubt that. Every jQuery method works in most popular browsers. That is what jQuery is for, to not have to deal with cross browser issues. There is probably something else wrong in your JS which FF compensates. Maybe you have to post more complete code. – Felix Kling May 12 '10 at 10:27
  • @ karim this does not work, if i do console.log $('#countryDropDown').change(function() { countryID = $(this).val(); console.log(countryID) }); i get an empty string.. – patad May 12 '10 at 10:29
  • @meow: Please note that I declared `countryID` before assigning the handler: `var countryID;`. Maybe this is the reason it does "not work". – Felix Kling May 12 '10 at 10:34
  • @felix, thanks for your update, i still get an empty string. will have to try something else – patad May 12 '10 at 10:41
  • @meow: You could try `.text()` instead if `.val()`: `$('option:selected', this).text()` – Felix Kling May 12 '10 at 11:17
  • @felix, the html looks like this: – patad May 12 '10 at 17:30
1

meow we have the same problem...

this is the solution:

if you want to access id of each option. this will do.

$("#countryDropdown").change(function() {
   var countryId = $('option:selected',this).attr('id');
   dostuff();
});
thinkraven
  • 11
  • 1
0

val() is used to retrieve the value of a form element. An option is not a form element but a sub-element if you will. Further more your approach will not work if they use the keyboard. You are better off doing it this way.

$("#countryDropdown").change(function() {
    var countryId = $(this).val();
    dostuff();
});
Alistair
  • 1,889
  • 2
  • 22
  • 31
  • okay, so it works, but it gives me an empty string in return instead of the value of the clicked option.. – patad May 12 '10 at 10:32
  • If you are getting an ID then it should be in the value of the option. -> will work with val(). Agree, maybe text() if you want the option text? – Alistair May 12 '10 at 23:17