2010-12-01 35 views
11

j'aisélectionnez <select> point par la valeur

<select id="x"> 
    <option value="5">hi</option> 
    <option value="7">hi 2</option> 
</select> 

Je veux une fonction javascript qui me permet de sélectionner et d'afficher le <option> par défaut par un identifiant. En d'autres termes, je veux faire un setOption(5) et le <option> avec la valeur "5" à afficher dans la liste déroulante par défaut.

Est-ce possible?

+0

Et qu'avez-vous essayé? –

+0

vous ne devriez même pas avoir besoin de javascript pour cela. Y a-t-il une raison pour laquelle vous devez faire du côté client? – fifigyuri

+3

@fifigyuri - Pourquoi pas? Je peux penser à plusieurs raisons pour lesquelles cela peut être utile. BTW, si jQuery est une option, c'est aussi simple que '$ ('# x'). Val ('5');'. – Kobi

Répondre

17

Si vous pouvez, avec ES6 ...

function setOption(selectElement, value) { 
    return [...selectElement.options].some((option, index) => { 
     if (option.value == value) { 
      selectElement.selectedIndex = index; 
      return true; 
     } 
    }); 
} 

... sinon ...

function setOption(selectElement, value) { 
    var options = selectElement.options; 
    for (var i = 0, optionsLength = options.length; i < optionsLength; i++) { 
     if (options[i].value == value) { 
      selectElement.selectedIndex = i; 
      return true; 
     } 
    } 
    return false; 
} 

setOption(document.getElementById('my-select'), 'b'); 

See it!

Si elle retourne false, la valeur n'a pu être trouvée :)

+0

Merci, Petite correction 'pour (var i = 0; i

+1

@Ronan Dejhero Cette correction n'est pas nécessaire? – alex

+0

non, ce n'est pas pour avoir des bits supplémentaires dans le code: p –

-2

Vous ne devriez pas avoir même javascript pour participer, il suffit d'utiliser l'attribut selected:

<select id="x"> 
    <option value="5" selected>hi</option> 
    <option value="7">hi 2</option> 
</select> 
+0

En fait, j'ai demandé un code javascript pour être en mesure d'éditer l'objet qui a «sélectionné» attrib –

+1

@ Ronan, oui; mais c'est ce que faisait @fifigyuri: ** à moins que ** cela soit fait dans ** la réponse aux actions utilisateur ** du côté client, il y a ** peu de raisons ** d'utiliser une fonction JavaScript pour y parvenir. –

1

Si vous utilisez jQuery (1.6 ou plus)

$('#x option[value="5"]').prop('selected', true) 
+0

Lorsque j'essaie $ ('# x option [value = "5"]') dans js-console avec ma valeur (visible à partir de l'inspection de l'élément), il ne trouve pas l'option. Si j'utilise $ ('# x'), c'est le cas. Tout en utilisant l'identifiant de l'élément de ma page, bien sûr. – JosephK

+0

J'ai répondu à la question, la question initiale a demandé "sélectionnez