How to preselect an <option> contextually?

Question

There are many instances of class .fare in my html. Therefore I am implementing the solution contextually. For some fares, I want to automatically pick the second value (All fare) on the .fare options list and disable the selection box.

The options are: options_fare = "Select a fare"All fare""

However, when I tried the following code, it stay on option 1 (Select a fare).

$contextualDiv.children('.fare').html(options_fare);
$contextualDiv.children('.fare option:eq(1)').attr('disabled', false).prop('selected', true).trigger('change');
    }

What am I missing here?

Thanks much!

Answer 1

change your:

$contextualDiv.children('.fare option:eq(1)')

to

$contextualDiv.children('.fare').children('option:eq(1)')

or

$contextualDiv.find('.fare option:eq(1)')

The reason why children is not working for your cause because children only looks at first level children and not the children of childrens to do a deep search use find instead.

working example