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 ?

Solution

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!

Comments

[Murtaza Mandvi]

This works like a charm..I just added more description to my question, can you see if theres a way to make it work? :) Thanks !!

[Murtaza Mandvi]

This works like a charm..I just added more description to my question, can you see if theres a way to make it work? :) Thanks !! –

[a432511]

I looked at the edit you made to your question. No two elements on your page should share the same ID. ID's are meant to be unique in the DOM and should never be repeated. Consider changing the second select's ID to something else like "personalInformation_country2"