Question

I’ve had a good look around and I think I’m close, but I’m really struggling.

We have a page that is pulling in content via AJAX to populate dropdown menus.

Your start off with one dropdown, and what you choose grabs the next set etc.

I want to be able to select an option in a dropdown via a link click in one of the later menus (ie, not originally visible), and I gather there is some jQuery binding oddness because of the AJAX, but I can’t figure out how to do this.

my html (the select list here doesn’t exist until it’s AJAX populated)

<form>
<select name="myList">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
</select>
<a href="javascript:void(0)" id="option1">Select option 1</a>
<a href="javascript:void(0)" id="option2">Select option 2</a>
<a href="javascript:void(0)" id="option3">Select option 3</a>
</form>

my jq:

$('#option1').click(function() {
    $('select[name=myList] option[value=1]').attr('selected', 'selected');
});
$('#option2').click(function() {
    $('select[name=myList] option[value=2]').attr('selected', 'selected');
});
$('#option3').click(function() {
    $('select[name=myList] option[value=3]').attr('selected', 'selected');
});

Now this works in selecting the option, but it doesn’t simulate a mouseclick, which I need as (for some reason), this is required to make the next content display (ie, not simply selecting the right option, it must be clicked on. And here I mean, I get get onClick events to fire, but this still doesn’t get the next content to load. I cannot change this sadly :/ ).

I’ve tried to implement something as here http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

But not had any success. Thanks for any ideas.

Answer 1

You could just always simulate the click yourself? Although it’s the change event you want, just do:

DEMO: http://jsfiddle.net/xsP2A/

$('#option1').click(function() {
    $('select[name=myList] option[value=1]').attr('selected', 'selected');
    $('select[name=myList]').change();
});
$('#option2').click(function() {
    $('select[name=myList] option[value=2]').attr('selected', 'selected');
    $('select[name=myList]').change();
});
$('#option3').click(function() {
    $('select[name=myList] option[value=3]').attr('selected', 'selected');
    $('select[name=myList]').change();
});