jQuery sélectionnez les éléments d'option par valeur

89

J'ai un élément select enveloppé par un élément span. Je ne suis pas autorisé à utiliser l'ID de sélection, mais je suis autorisé à utiliser l'ID de portée. J'essaie d'écrire une fonction javascript / jquery dans laquelle l'entrée est un nombre i, qui est l'une des valeurs des options de select. La fonction transformera l'option appropriée sur sélectionnée.

<span id="span_id">
    <select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
        <option value="1">cleaning</option>
        <option value="2">food-2</option>
        <option value="3">toilet</option>
        <option value="4">baby</option>
        <option value="6">knick-knacks</option>
        <option value="9">junk-2</option>
        <option value="10">cosmetics</option>
    </select>
</span>

J'ai écrit quelque chose comme suit (cela ne fonctionne pas complètement, c'est pourquoi je poste cette question):

function select_option(i) {

    options = $('#span_id').children('select').children('option');
    //alert(options.length); //7
    //alert(options[0]); //[object HTMLOptionElement]
    //alert(options[0].val()); //not a jquery element
    //alert(options[0].value); //1

    //the following does not seem to work since the elements of options are DOM ones not jquery's
    option = options.find("[value='" + i + "']");
    //alert(option.attr("value")); //undefined
    option.attr('selected', 'selected');

}

Merci!

ravi
la source

Réponses:

148

Voici la solution la plus simple avec un sélecteur clair:

function select_option(i) {
  return $('span#span_id select option[value="' + i + '"]').html();
}
jonathan.cone
la source
32

Avec jQuery> 1.6.1 devrait être préférable d'utiliser cette syntaxe:

$('#span_id select option[value="' + some_value + '"]').prop('selected', true);
damoiser
la source
29

Enveloppez simplement votre option dans $ (option) pour qu'elle agisse comme vous le souhaitez. Vous pouvez également raccourcir le code en faisant

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
Adrian Rodriguez
la source
6
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option); 

voici le violon http://jsfiddle.net/hRFYF/

Rafay
la source
6

Vous pouvez utiliser .val () pour sélectionner la valeur, comme suit:

function select_option(i) {
    $("#span_id select").val(i);
}

Voici un jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

à M
la source
Sur quel navigateur / plateforme cela n'a-t-il pas fonctionné pour vous? Sur Mac / Chrome, il sélectionne avec succès un élément dans la liste, qui correspond exactement à la question d'origine.
tom
@ Mr.Llama, vous avez peut-être mal compris la question. Le code de @ tom fait ce qui a été demandé: étant donné une valeur i, sélectionnez le ith optiondans le select. OP n'essayait pas de filtrer les options.
Paul
4

Pour obtenir la valeur, utilisez simplement ceci:

<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>

<script>
function getvalue()
{
    alert($("#ari_select option:selected").val()); 
}
</script>

cela récupérera les valeurs

Arijit Ghosh
la source
1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}
Hogan
la source
Je vous remercie! Je ne sais pas quelle est l'implémentation interne de jQuery, mais les autres solutions semblent plus simples.
ravi le
Si vous avez déjà jQuery, ce sont plus faciles, mais j'ai pensé que vous voudrez peut-être connaître une façon pure de le faire.
Hogan
0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
rsc
la source