assigning "Selected" option via jQuery after delay()

Question

In the jquery below, the two custom fields (customfield_13272, customfield_13273) are select lists which are only populated after the customfield_13271 select list is changed.

I'm trying to assign the selected option of the two custom fields, to be the first element in the list which is not the default "Select an item" option.

The problem, in addition to the fact that the selected option of those fields are not changing, is that when I attempt to alert the value of one of those options, it returns undefined.

Do I simply need to add a delay() function to allow the custom field options to populate or am I missing something else?

BTW, my jQuery css directive IS working fine.

<script type="text/javascript">
jQuery.noConflict()
jQuery(document).ready(function()
{
    jQuery('#customfield_13271').change(
    function()
    {
    jQuery('#customfield_13272,#customfield_13273').css('border','4px solid orange');
    jQuery('#customfield_13272 option').first().next().attr('selected','selected');
    jQuery('#customfield_13273 option').first().next().attr('selected','selected');
    alert(jQuery('#customfield_13272 option').first().next().val());//THIS RETURNS UNDEFINED
    });
});
</script>

I think it's relevant to mention that .change() does't always work in IE: http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie — SSH This, Feb 14 '12 at 20:21

score 1 · Accepted Answer · answered Feb 14 '12 at 20:21

1

You can use psuedo selecto :eq(index) to select the element at a specified index.

Change this

jQuery('#customfield_13272 option').first().next().attr('selected','selected');
jQuery('#customfield_13273 option').first().next().attr('selected','selected');

to

jQuery('#customfield_13272 option:eq(1)').attr('selected','selected');
jQuery('#customfield_13273 option:eq(1)').attr('selected','selected');

I think just setting the selected attribute of option will not change the select element to show it as selected item. Try this instead.

jQuery('#customfield_13272').val(jQuery('#customfield_13272 option:eq(1)').val());
jQuery('#customfield_13273').val(jQuery('#customfield_13273 option:eq(1)').val());

If you want to see which option is selected just use jQuery('#customfield_13272').val()

answered Feb 14 '12 at 20:21

ShankarSangoli

68,720
11
89
123

Its not working. I believe I have a timing issue between the time that the main select gets changed, and the custom selects are populated with the relevant data, based on the master select list's value. That's why I was asking about where to insert a delay() – RegEdit Feb 14 '12 at 20:35
Where do you populate the custom selects? There is no such code in the change event handler. – ShankarSangoli Feb 14 '12 at 20:36
There are custom onchange handlers on all the select items that govern the options of each. – RegEdit Feb 14 '12 at 20:55
Then you should execute this code inside those custom event handlers where you populate the options. – ShankarSangoli Feb 14 '12 at 20:57
I don't have access to the source code which generates those event handlers. Can I bind to them via script on the same page? – RegEdit Feb 14 '12 at 21:31

assigning "Selected" option via jQuery after delay()

1 Answers1