11

When I click on a Select option, I am handling the Changed event.

I want to simulate this in code, and have it LOOK THE SAME as when the user clicks on the option.

So far, setting 'selected' attribute on the option does not highlight it the same as when you click on it.

I can trigger 'change' on the option and hit my handler, but the option on the list is not selected as if clicked.

Suggestions?

UPDATE: The query selection code works just fine - thanks for the responses. The problem was mine (of course). I had the selection code outside the Jquery.Ajax Success: block, so I think it was working, but the ajax response code was hosing it.

R3lm
  • 111
  • 1
  • 1
  • 5

4 Answers4

5
​$('option[value="4"]').attr('selected', 'selected').parent().focus();​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Works for me. See http://jsfiddle.net/TZVyh/1/

Ben Foster
  • 33,525
  • 36
  • 167
  • 284
  • It's curious. After running this the element has a very light gray box around it - it's selected, but not highlighted as when you click on it with the mouse (blue). The listbox has focus, and when i up/down arrow, the option above or below the selected element is then selected and also highlighted blue, with the style that I want! – R3lm Apr 24 '12 at 23:59
5

I was working with the jquery datatable plugin ColumnFilterWidgets and I needed to do the following to execute the filter action (based on answers from elclanrs and Ben Foster): 

$("option").attr('selected', 'selected').parent().focus();
$("option").parent().change();
Mark
  • 681
  • 8
  • 12
  • 1
    This should be the accepted answer as it is the only one that "simulate" the same exact behaviour as the user interaction. – Ivan Carosati May 19 '15 at 03:53
0
$("option").attr("selected","selected");

will select the option you want.and after that you can trigger the event.

and don't forget to clear the other options' selected attribute using:

$("option").attr("selected",null);

or 

$("option").removeAttr("selected");
Taha Paksu
  • 14,871
  • 1
  • 44
  • 74
  • At least in IE, with multiple=multiple attribute, settings selected does not seem to highlight the option as when clicked. – R3lm Apr 24 '12 at 23:46
0

...but the option on the list is not selected as if clicked.

I don't fully understand what you're trying to do but $('select').change() works similar to $('select option').click(). In the change event $(this).val() is the value of the selected option as well as in the click event.

In either case you can select an option with $('select[value="yourvalue"]').prop('selected', true);

elclanrs
  • 89,567
  • 21
  • 132
  • 165
  • I should elaborate. When I click on on the option two things happen: the option element is highlighted blue (clearly some kind of style change). Second, the change event is fired. Setting the 'selected' attribute on an option in code does not apply the same visual style as when clicked. – R3lm Apr 24 '12 at 23:48
  • `selects` are tricky, you can't style them and they depend on the OS. – elclanrs Apr 24 '12 at 23:50