Jquery - Change dynamic dropdown selected element

Question

I have a dynamically generated Dropdown for which I need to change the selected value using Jquery.

<select class="txtfield country" id="ctl00_MainContentAreaPlaceHolder_personalInformation_country" name="ctl00$MainContentAreaPlaceHolder$personalInformation$country"> 
    <option value="FJ">FIDJI</option>
    <option value="FI">FINLANDE</option>
    <option value="FR" selected="selected">FRANCE METROPOLITAINE</option>
    <option value="GA">GABON</option>
</select>

One way is to use the dropdown's entire ID (includng ctl00..) :

$j("#ctl00_MainContentAreaPlaceHolder_DeliveryPersonalInformation_country option[value='FR']").attr('selected', 'selected'); 

Is there a way using CSS I can find the element and change the value since I do not prefer using the dynamic control's ID?

EDIT :

I forgot to mention that I have 2 custom controls on the page with the same dropdown name.

so custom control 1 generates:

<select class="txtfield ckgcountry" id="ctl00_MainContentAreaPlaceHolder_personalInformation_country" name="ctl00$MainContentAreaPlaceHolder$personalInformation$country">  ...
    <option value="ZW">ZIMBABWE</option>
</select>

and customer Control 2 generates:

<select class="txtfield country" id="ctl00_MainContentAreaPlaceHolder_personalInformation_country" name="ctl00$MainContentAreaPlaceHolder$personalInformation$country">
    <option value="FJ">FIDJI</option>
    <option value="FI">FINLANDE</option>
    <option value="FR" selected="selected">FRANCE METROPOLITAINE</option>
    <option value="GA">GABON</option>
</select>

So using the code it changes the value of only the first name it finds in the DOM, how do i change the value of the second one...is there a way to do this using CSS ?

Answer 1

Looks like you are using ASP.NET.

It really isn't reliable to use the full ASP.NET control ID (post-render) because it could change at some point. The only portion of the ID that is guaranteed not to change is the last part of the ID which was defined in the ASP.NET Control's ID property.

Select that item with a wildcard selector

// Unselect the currently selected item
$("select[id$='personalInformation_country'] option:selected").removeAttr("selected");

// Select the option at index 0
$("select[id$='personalInformation_country'] option:eq(0)").attr("selected","selected");

or

// Select the option with value FR
$("select[id$='personalInformation_country'] option[value='FR']").attr("selected","selected");

The $='personalInformation_country' will match all ID's ending with "personalInformation_country", which should only be one!

Answer 2

Do you mean like this?

$('select.country').val('FR');

This will set the selection for all select elements with the CSS class "country"

If you want to pinpoint the select better, you'll need to use the ID/Name or ensure it is nested in a way you can be sure it can be located.

e.g.

$('form[name=myForm] select.country').val('FR');//presuming there is only one

Answer 3

It is hard to tell without seeing the rest of the markup on the page however you need to ensure uniquness so you get the correct select element so the id is usually the best bet.

If you can use the exact id as this has the best perfrmance however you asked for options so here it goes.

A few options:

$('select.txtfield') will find all selects with the class txtfield therefore may not be unique.

A better bet maybe $('select.txtfield.country') which I assume is unique?

or a 'hack' for webforms is to use the ends-with selector

$('select[id$=personalInformation_country]')