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.