jQuery wählt Optionselemente nach Wert aus

89

Ich habe ein ausgewähltes Element, das von einem span-Element umschlossen ist. Ich darf die Auswahl-ID nicht verwenden, aber ich darf die Span-ID verwenden. Ich versuche, eine Javascript / JQuery-Funktion zu schreiben, bei der die Eingabe eine Zahl i ist, die einer der Werte der Auswahloptionen ist. Die Funktion schaltet die entsprechende Option auf ausgewählt.

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

Ich habe etwas wie folgt geschrieben (dies funktioniert nicht vollständig, weshalb ich diese Frage poste):

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

}

Vielen Dank!

verzückt
quelle

Antworten:

148

Hier ist die einfachste Lösung mit einer klaren Auswahl:

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

Mit jQuery> 1.6.1 sollte es besser sein, diese Syntax zu verwenden:

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

Wickeln Sie Ihre Option einfach in $ (Option) ein, damit sie sich so verhält, wie Sie es möchten. Sie können den Code auch kürzer machen, indem Sie dies tun

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

Hier ist die Geige http://jsfiddle.net/hRFYF/

Rafay
quelle
6

Sie können .val () verwenden, um den Wert wie folgt auszuwählen:

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

Hier ist eine jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

Tom
quelle
Auf welchem ​​Browser / auf welcher Plattform hat es bei Ihnen nicht funktioniert? Unter Mac / Chrome wird erfolgreich ein Element in der Liste ausgewählt, genau das war die ursprüngliche Frage.
Tom
@ Mr.Llama, vielleicht haben Sie die Frage falsch verstanden. Der Code von @ tom macht das, was gefragt wurde: Wählen Sie bei einem gegebenen Wert idas i-te optionin der select. OP hat nicht versucht, die Optionen zu filtern.
Paul
4

Um den Wert zu erhalten, verwenden Sie einfach Folgendes:

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

Dadurch werden die Werte abgerufen

Arijit Ghosh
quelle
1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}
Hogan
quelle
Danke dir! Ich weiß nicht, wie die interne Implementierung von jQuery aussieht, aber die anderen Lösungen sehen einfacher aus.
Rapt
Wenn Sie bereits über jQuery verfügen, sind diese einfacher, aber ich dachte, Sie möchten vielleicht eine reine js-Methode kennen.
Hogan
0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
rsc
quelle