Stellen Sie die Auswahloption 'ausgewählt' nach Wert ein

951

Ich habe ein selectFeld mit einigen Optionen. Jetzt muss ich eine davon optionsmit jQuery auswählen . Aber wie kann ich tun, wenn ich weiß , nur die valuevon der , optiondie ausgewählt werden müssen?

Ich habe folgendes HTML:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

Ich muss die Option mit Wert auswählen val2. Wie kann das gemacht werden?

Hier ist eine Demoseite: http://jsfiddle.net/9Stxb/

w00
quelle
Verwenden Sie für den Einzelwert von Dropdown .val ('5') für die Mehrfachauswahl. Verwenden Sie val (['5', '4', '8']). Vollständige Demo freakyjolly.com/…
Code Spy

Antworten:

1534

Es gibt einen einfacheren Weg, bei dem Sie nicht in das Options-Tag gehen müssen:

$("div.id_100 select").val("val2");

Schauen Sie sich diese jQuery-Methode an .

pinghsien422
quelle
18
Dies kann dazu führen, dass (zumindest) Fehler in FF in einem leeren Auswahlfeld auftreten
Jonathan
21
Das Poster der Frage beginnt mit: "Ich habe ein Auswahlfeld mit einigen Optionen ...", es ist also nicht leer, daher bleibt die Lösung korrekt.
Pinghsien422
8
@JamesCazzetta sendet ein Array an val : .val(["Multiple2", "Multiple3"]). api.jquery.com/val/#val-value
scipilot
133
Ich musste manuell aufrufen .val(x).change();, um das onChange-Ereignis der Auswahl auszulösen. Es scheint, dass das Setzen von val () es nicht auslöst.
Scipilot
16
Seien Sie vorsichtig: val () kann Werte festlegen, die in Optionen nicht vorhanden sind.
Daniel
429

So wählen Sie eine Option mit dem Wert 'val2' aus:

$('.id_100 option[value=val2]').attr('selected','selected');
Kirill Ivlev
quelle
5
Dies ist die beste Lösung, wenn der gewünschte Wert eine Option sein kann oder nicht, und Sie möchten keine Änderung vornehmen, wenn dies keine Option ist. Wenn Sie .val()bei der Auswahl einen Wert auswählen, der nicht vorhanden ist, wird die Auswahl aufgehoben.
Wally Altman
Stimmen Sie zu - dies ist die eleganteste Option - klar und auf den Punkt. Ich bin mir nicht sicher, ob "prop" in allen Fällen besser funktioniert (Browser). Aber das macht sicherlich die einfache Suche für Sie.
Lee Fuller
4
Außerdem habe ich verwendet, $("select[name=foo] option[value=bar]).attr('selected','selected');was auch für alle von mir getesteten Browser gut funktioniert hat.
Lee Fuller
1
Diese Antwort gefällt mir besser als die akzeptierte Antwort, weil: element.outerHTML damit aktualisiert wird, während dies mit der akzeptierten Antwort nicht der Fall ist.
HoldOffHunger
2
Es ist erwähnenswert, dass dies nicht funktioniert, wenn die Auswahl-Dropdown-Liste ausgeblendet wurde. In meinem Fall verwende ich also das Auswahlbox-Plugin, versuche jedoch, eine Auswahlbox-Änderung auszulösen, damit der ursprüngliche Code mit dem Onchange-Handler für die Dropdown-Liste weiterhin ausgeführt wird. Sie müssen nur den Code für das neue Element aktualisieren, das das Element selectboxit ist
chris c
331

Verwenden Sie das change()Ereignis nach Auswahl des Werts. Aus den Dokumenten:

Wenn das Feld den Fokus verliert, ohne dass sich der Inhalt geändert hat, wird das Ereignis nicht ausgelöst. Um das Ereignis manuell auszulösen, wenden Sie es .change()ohne Argumente an:

$("#select_id").val("val2").change();

Weitere Informationen finden Sie unter .change () .

Jitendrapurohit
quelle
22
Dies verdient viel mehr Stimmen und gehört zur Spitze. Es ist die richtige Art und Weise, kein Hantieren mit prop, attrusw. und progagates alle richtig Ereignisse.
Polygnome
1
Ja, dies überträgt alle Ereignisse korrekt. In meinen Tests hat "attr" das erste Mal funktioniert, dann blieb alles "ausgewählt". Ich habe "prop" verwendet, was alles korrekt geändert hat, aber keine Ereignisse wie (Ein- / Ausblenden) anderer Felder verbreitet hat. Diese Antwort hat in allen Fällen funktioniert und sollte als richtig angesehen werden.
ILLin
1
Wenn Sie bereits einen Listener haben, der geändert werden muss, führt dies zu einer Endlosschleife.
QWERZMAN
1
Ich hatte eine Weile Mühe, meinen dummen Dropdown-Listen-Wert zu ändern. Diese Lösung war die einzige, die funktionierte! Danke Kumpel!
AxleWack
1
Vielen Dank. Ich habe viel gesucht, bevor ich diesen Vorschlag gefunden habe, und dies war das einzige, was funktioniert hat. Ich bin mir nicht sicher, warum es nicht oben ist.
Rob Santoro
58

Deaktivieren Sie zuerst alle und filtern Sie die auswählbaren Optionen:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)
dumm
quelle
2
Der Wert des ausgewählten Attributs kann eine leere Zeichenfolge sein oder selected. Meinten Sie .prop()?
rink.attendant.6
2
Gute Antwort. Die akzeptierte Antwort endet mit einer leeren Auswahl, wenn der Wert in den Optionen nicht vorhanden ist.
Rauli Rajande
5
Nach oben, am besten hier. Für die zukünftige Verwendung sollten wir prop anstelle von attr verwenden.
Daniel
Ich mag diese Lösung sehr. Ich frage mich jedoch, ob es in Bezug auf die Leistung besser wäre, wenn der Selektor auf ".id_100> Option" geändert würde
Hill
43
<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

Einstellung auf ausstehenden Status nach Wert

   $('#contribution_status_id').val("2");
Entwickler
quelle
36

Für mich hat das Folgende den Job gemacht

$("div.id_100").val("val2").change();
Taran
quelle
27

Ich denke, der einfachste Weg ist die Auswahl von val (), aber Sie können Folgendes überprüfen. Siehe Wie gehe ich mit Auswahl- und Options-Tags in jQuery um? Weitere Informationen zu Optionen.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

Nicht optimiert, aber in einigen Fällen ist auch die folgende Logik hilfreich.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});
Dipu
quelle
Ich bevorzuge diese Methode gegenüber der direkten Einstellung von val (). Ich mag es auch, das Attribut zu setzen - hilft beim Debuggen. $ (this) .attr ("ausgewählt", "ausgewählt")
Craig Jacobs
17

Sie können jedes Attribut und seinen Wert mithilfe der Attributauswahl [attributename=optionalvalue]auswählen. In Ihrem Fall können Sie also die Option auswählen und das ausgewählte Attribut festlegen.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

Wo valueist der Wert, nach dem Sie auswählen möchten?

Wenn Sie zuvor ausgewählte Werte entfernen müssen, wie dies bei mehrmaliger Verwendung der Fall wäre, müssen Sie diese geringfügig ändern, um zuerst das ausgewählte Attribut zu entfernen

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);
Rune FS
quelle
15

Der beste Weg ist wie folgt:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
Daniel Carpio Contreras
quelle
Bei Chrome hat die Einstellung $('<select>').val('asdf')die Auswahl nicht aktualisiert, um die aktuell ausgewählte Option anzuzeigen. Diese Antwort hat dieses Problem behoben.
Joshua Burns
Dies wird zwar auch funktionieren, aber $ ('<select>') .val ('asdf') funktioniert gut in Chrome 79.0.3945.88
QMaster
14

Eine einfache Antwort ist bei HTML

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

Rufen Sie bei jquery die unten stehende Funktion per Taste oder was auch immer auf

$('#idUkuran').val(11).change();

es ist einfach und 100% funktioniert, weil es meiner Arbeit entnommen ist ... :) hoffe, es hilft ..

Mang Jojot
quelle
Ihr Standardwert ist 1000? Warum nicht ""
Voodoocode
2
Es ist eine Option, die Sie nach Bedarf ändern können. :)
Mang Jojot
14

Es gibt keinen Grund, dies zu überdenken. Sie greifen lediglich auf eine Eigenschaft zu und legen sie fest. Das ist es.

Okay, also einige grundlegende dom: Wenn Sie dies in reinem JavaScript tun würden, würden Sie dies tun:

window.document.getElementById('my_stuff').selectedIndex = 4;

Aber Sie machen es nicht mit reinem JavaScript, sondern mit jQuery. Und in jQuery möchten Sie die Funktion .prop () verwenden, um eine Eigenschaft festzulegen. Gehen Sie also folgendermaßen vor:

$("#my_stuff").prop('selectedIndex', 4);

Stellen Sie auf jeden Fall sicher, dass Ihre ID eindeutig ist. Andernfalls schlagen Sie mit dem Kopf gegen die Wand und fragen sich, warum dies nicht funktioniert hat.

Yitzhak
quelle
12

Der einfachste Weg, dies zu tun, ist:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

Ausgabe: Dadurch wird ENT aktiviert .

Pran
quelle
12

Es ist besser, change()nach dem Einstellen des Auswahlwerts zu verwenden.

$("div.id_100 select").val("val2").change();

Auf diese Weise wird der Code fast die Auswahl durch den Benutzer ändern. Die Erklärung ist in JS Fiddle enthalten :

JS Fiddle

Nick Tsai
quelle
Warum ist das? Könnten Sie etwas erklären?
71GA
JS Fiddle . Bei einer change () -Methode nähert sich der Code der Änderung der Auswahl durch den Benutzer, während Listener für Änderungen erforderlich sind, die verarbeitet werden müssen.
Nick Tsai
12

$('#graphtype option[value=""]').prop("selected", true);

Dies funktioniert gut, wenn #graphtypedie ID des Select-Tags angegeben ist.

Beispiel Tag auswählen:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>
LOKENDRA
quelle
8
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
Ravi Wadje
quelle
8

Verwenden:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

Das funktioniert bei mir. Ich verwende diesen Code zum Parsen eines Werts in einem Fancybox-Aktualisierungsformular. Meine vollständige Quelle aus app.js lautet:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

Und mein PHP-Code lautet:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}
Adityo
quelle
7

.attr () funktioniert manchmal nicht in älteren jQuery-Versionen, aber Sie können .prop () verwenden :

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});
Shujaath Khan
quelle
4

Dies funktioniert sicher für Select Control :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });
Shujaath Khan
quelle
4

Geben Sie einfach diesen Code ein:

$("#Controls_ID").val(value);
Osama Khodrog
quelle
4

Quelle Link - Geben Sie hier die Bildbeschreibung ein

Verwenden Sie die val () jQuery-Methode für die Auswahl einzelner und mehrerer Werte in DropDown

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>
Code Spy
quelle
3

Versuche dies. Einfaches und dennoch effektives JavaScript + jQuery die tödliche Kombination.

SelectComponent:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

Auswahl :

document.getElementById("YourSelectComponentID").value = 4;

Nun wird Ihre Option 4 ausgewählt. Sie können dies tun, um die Werte beim Start standardmäßig auszuwählen.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

oder erstellen Sie eine einfache Funktion, fügen Sie die Zeile ein und rufen Sie die Funktion auf anyEvent auf, um die Option auszuwählen

Eine Mischung aus jQuery + JavaScript macht die Magie ....

Majid Ali Khan
quelle
3

Ist ein alter Beitrag, aber hier ist eine einfache Funktion, die sich wie ein jQuery-Plugin verhält.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

Sie können einfach so etwas tun:

$('.id_100').selectOption('val2');

Reson, warum dies verwendet wird, liegt daran, dass Sie den ausgewählten Satemant in DOM ändern, was von Crossbrowsern unterstützt wird, und auch eine Änderung auslösen, die Sie abfangen können.

Ist grundsätzlich menschliche Handlungssimulation.

Ivijan Stefan Stipić
quelle
2
  • Sie müssen berücksichtigen, dass der Wert, den Sie dynamisch ändern möchten, mit dem Wert identisch sein muss, der in den Optionen vorhanden ist, die Sie in Ihrem HTML-Code definieren case sensative. Sie können Ihr Auswahlfeld dynamisch wie folgt ändern:

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

Shahrukh Anwar
quelle
1

Es scheint ein Problem mit ausgewählten Dropdown-Steuerelementen zu geben, die sich nicht dynamisch ändern, wenn die Steuerelemente dynamisch erstellt werden, anstatt sich auf einer statischen HTML-Seite zu befinden.

In jQuery hat diese Lösung für mich funktioniert.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

Genau wie ein Nachtrag funktionierte die erste Codezeile ohne die zweite Zeile tatsächlich transparent. Das Abrufen des ausgewählten Index war nach dem Festlegen des Index korrekt. Wenn Sie tatsächlich auf das Steuerelement geklickt haben, wurde das richtige Element angezeigt, dies wurde jedoch nicht angezeigt in der oberen Beschriftung des Steuerelements.

Hoffe das hilft.

user2288580
quelle
0

Ein Problem, auf das ich gestoßen bin, als der Wert eine ID und der Text ein Code ist. Sie können den Wert nicht mithilfe des Codes festlegen, haben jedoch keinen direkten Zugriff auf die ID.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here
Ryan
quelle
0

Für mich geht das

$("#id_100").val("val2");
user9972736
quelle
-1

Das funktioniert gut

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });
Mohammed Muzammil
quelle