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.