JQuery sélectionnez l'option qui a plusieurs entrées avec la même valeur

Question

J'ai un programme qui a un menu déroulant pour sélectionner dans une liste de pays. Dans cette liste, j'ai sélectionné N pays "importants" qui figureront en tête de liste, suivis d'une liste de tous les pays, y compris les pays apparaissant dans la partie "importante" du pays de la liste.

Par exemple:

<select id="id-search-country" name="country"> 
<option value="----">All countries 
<option value="AR,,">Argentina  # you can see that this is repeated 
<option value="AU,,">Australia 
<option value="BR,,">Brazil 
<option value="CA,,">Canada 
<option value="----">---- 
<option value="----">All countries 
<option value="AF,,">Afghanistan 
<option value="AL,,">Albania 
<option value="DZ,,">Algeria 
<option value="AS,,">American Samoa 
<option value="AR,,">Argentina  # repeated here 
etc. 

Lorsque je tente de définir la valeur des utilisateurs de pays en cours en utilisant $ (# id-recherche-pays) .val (current_country_value), JQuery sélectionnera le dernier élément la liste par opposition à la sélection de la valeur en haut de la liste. Je préférerais que l'on sélectionne la valeur du pays qui apparaît en haut de la liste s'il y figure. Est-ce que quelqu'un sait comment je pourrais configurer JQuery pour mettre l'option de pays actuel au pays "important" (si la valeur de current_country_value est dans cette partie de la liste), et pour sélectionner seulement le pays du reste de la liste si il n'est pas apparu dans la partie "importante"?

Cordialement

Answer 1

Edit: Après Reigel et je un fait monter les uns les autres dans les commentaires, il peut être réalisé avec une ligne de jQuery:

$("#id-search-country option[value=" + current_country_value + "]:first")[0].selected = true; 

Answer 2

Vous pouvez essayer d'enlever les pays « importants » de la partie inférieure de la liste (la liste complète), avant de sélectionner le pays. Ensuite, ajoutez-les aux bons endroits.

L'élément sélectionné doit rester le même.

Answer 3

$("select").change(function(){ 
    $("option[value='" + $(this).val() + "']:first").attr("selected","selected"); 
}); 

Fondamentalement, pour cela, j'utilise le sélecteur d'attribut et regarder pour le dernier élément avec la valeur qui vient d'être sélectionnée. Pour les doublons, ce sera celui en haut et pour les simples, ce sera lui-même. Définissez ensuite l'attribut selected pour indiquer au navigateur à sélectionner.

Exemple: http://jsfiddle.net/jonathon/7hgjR/

Answer 4

je pense avoir une réponse. Il pourrait être en mesure d'être allégée un peu, mais avec quelques solutions de contournement, voici ce que je suis:

var options = $.makeArray($('option').each(function(){ return $(this).val()})); 
var o = new Array(); 
for(x in options){ 
    o.push(options[x].value); 
} 
var x = o.indexOf('AR,,'); 
$('#id-search-country option').eq(x).attr('selected', 'selected'); 

J'ai fait les options dans un tableau, puis poussé les valeurs à un nouveau tableau (options.indexOf ('AR ,,') ne fonctionne pas pour une raison quelconque); puis sélectionné l'option en fonction de son index, de sorte que le premier sera sélectionné.

See it in action

Answer 5

La solution acceptée donnée ci-dessus fonctionne bien si la valeur sélectionnée est dans la liste, mais si elle ne se trouve pas, il provoque une erreur dans Crome de Google qui se traduit dans le menu déroulant étant complètement occulté . Le correctif est le suivant:

first_selector = $("#id-search-country option[value=" + current_country_value + "]:first"); 
if (first_selector.length) { // check that the selector was found 
    first_selector[0].selected = true; 
} else { 
    $("#id-search-country").val(current_country_value); // fallback to default JQuery method 
}