Question

I have a parent Div :

<div id="ctl00_MainContentAreaPlaceHolder_deliveryOpen" class="delivery_open" style="display: block;">

//Child select Element
<select class="txtfield ckgcountry" id="ctl00_MainContentAreaPlaceHolder_DeliveryPersonalInformation_country" name="ctl00$MainContentAreaPlaceHolder$DeliveryPersonalInformation$country"> 
 <option value="DE">ALLEMAGNE</option>
 <option value="TF">TERRES AUSTRALES FR.</option>
 <option value="TH">THAILANDE</option>

</select>   

</div>

I am trying to change the dropdown values selected item using :

$j("div[id*='deliveryOpen'] > .txtfield ckgcountry").removeAttr('selected');

OR

$j(".delivery_open > .txtfield ckgcountry").removeAttr('selected');

Both of these methods don’t seem to work, what am i missing?, and also if theres a better (more efficient) way to achieve this?

Extra information:

I have 2 of the same elements with the same names (since its one custom control repeated). thus I cannot directly access the Select element, I have to go from the parent DIV and find the select element inside the parent DIV.

Answer 1

I think you have a syntax error in your statements – you’re trying to select the dropdown by class, so the selector should be .ckgcountry instead of ckgcountry. Also, I don’t see a an element that would correspond to .txtField, so that could be causing failure as well.

However, you could use this as your selector:

$("select[id$='DeliveryPersonalInformation_country']")

I’m a little confused as to what you want to do with those removeAttr('selected'); however. If you want to just select a different option, try:

$("select[id$='DeliveryPersonalInformation_country']").val("TF");