Jquery - Modifier l'élément sélectionné de la liste déroulante dynamique

Question

J'ai une liste déroulante générée dynamiquement pour laquelle j'ai besoin de changer la valeur sélectionnée en utilisant 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> 

La première consiste à utiliser ensemble ID de la liste déroulante (comportant un gros de ctl00 ..):

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

Est-il possible en utilisant CSS je peux trouver l'élément et modifier la valeur puisque je ne préfère en utilisant l'ID du contrôle dynamique?

EDIT:

j'oublié de mentionner que j'ai 2 contrôles personnalisés sur la page avec le même nom de menu déroulant.

donc un contrôle personnalisé 1 génère:

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

et le client contrôle 2 génère:

<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> 

Donc, en utilisant le code qu'il modifie la valeur du seul prénom qu'il trouve dans les DOM, comment est-ce que je change la valeur de la deuxième ... est-il un moyen de le faire en utilisant CSS?

Answer 1

On dirait que vous utilisez ASP.NET.

Il n'est pas vraiment fiable d'utiliser l'ID de contrôle ASP.NET complet (post-rendu), car il peut changer à un moment donné. La seule partie de l'ID dont la modification est garantie est la dernière partie de l'ID définie dans la propriété ID du contrôle ASP.NET.

Sélectionnez cet élément avec un sélecteur générique

// 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"); 

ou

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

Le $='personalInformation_country' correspond à tous la fin de ID avec "personalInformation_country", qui ne devrait être qu'un!

Answer 2

Voulez-vous dire par là?

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

Cela définira la sélection pour tous les éléments de sélection avec la classe CSS « ​​pays »

Si vous voulez repérer la sélection mieux, vous aurez besoin d'utiliser l'ID/Nom ou vous assurer qu'il est imbriqué d'une manière que vous pouvez être sûr qu'il peut être localisé.

par exemple.

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

Answer 3

Il est difficile de dire sans voir le reste du balisage sur la page mais vous devez vous assurer uniquness afin que vous obteniez l'élément select correct si l'id est généralement le meilleur pari.

Si vous pouvez utiliser l'identifiant exact car il a la meilleure performance mais vous avez demandé des options, alors c'est parti.

Quelques possibilités:

$('select.txtfield') trouverez toutes les sélections avec la classe txtfield peuvent donc ne pas être unique.

Un meilleur pari peut-être $('select.txtfield.country') qui je suppose est unique?

ou un « hack » pour webforms est d'utiliser les extrémités avec le sélecteur

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