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!

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

32

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

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

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


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/


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


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

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);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.