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!

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();
}

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

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


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/


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


1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}

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);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.