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!