wake-up-neo.com

Setzen Sie die Auswahloption 'selected' nach Wert

Ich habe ein select-Feld mit einigen Optionen. Jetzt muss ich mit jQuery eine dieser options auswählen. Aber wie kann ich das tun, wenn ich nur die value der option kenne, die ausgewählt werden muss?

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 dem Wert val2 auswählen. Wie kann das gemacht werden?

Hier ist eine Demo-Seite: http://jsfiddle.net/9Stxb/

jqueryjquery-selectorshtml-select
783
w00

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

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

Überprüfen Sie die this jQuery-Methode .

1283
pinghsien422

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

$('.id_100 option[value=val2]').attr('selected','selected');
350
Kir Ivlev

Verwenden Sie das Ereignis change(), nachdem Sie den Wert ausgewählt haben. 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 .change() ohne Argumente an:

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

Weitere Informationen finden Sie unter .change ().

233
jitendrapurohit

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

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)
45
silly
<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");
39
Developer

Für mich hat das folgende getan

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

Ich denke, der einfachste Weg ist, val () zu setzen, aber Sie können Folgendes überprüfen. Siehe Wie gehe ich mit Select- und Option-Tags in jQuery um? für weitere Details zu Optionen.

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

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

Nicht optimiert, aber die folgende Logik ist in einigen Fällen auch nützlich.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});
24
Dipu

Sie können jedes Attribut und seinen Wert mit dem Attributselektor [attributename=optionalvalue] auswählen. In diesem Fall können Sie die Option auswählen und das ausgewählte Attribut festlegen.

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

Wobei value der Wert ist, nach dem Sie auswählen möchten.

Wenn Sie zuvor ausgewählte Werte entfernen möchten, wie dies bei mehrmaliger Verwendung der Fall wäre, müssten Sie sie leicht ändern, um das ausgewählte Attribut zuerst zu entfernen

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

eine einfache Antwort lautet 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>

bei Jquery rufen Sie die Funktion mit der Taste oder was auch immer auf

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

es ist einfach und 100% funktioniert, es ist aus meiner Arbeit entnommen ...:) hoffe seine Hilfe ..

13
Mang Jojot

Am einfachsten geht das:

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

11
Pran

Es ist besser, change() zu verwenden, nachdem Sie den Auswahlwert festgelegt haben.

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

Dadurch wird der Code fast vom Benutzer ausgewählt, die Erklärung ist in JS Fiddle enthalten: 

JS Fiddle

11
Nick Tsai

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

Das funktioniert gut, wenn #graphtype ist die ID des Select-Tags.

beispiel Select Tag:

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

Benutzen:

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

Das funktioniert für mich. Ich verwende diesen Code zum Analysieren eines Werts in einem Fancybox-Aktualisierungsformular. Mein vollständiger Quellcode 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));
}
8
Adityo
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
7
Ravi Wadje

Es gibt keinen Grund, dies zu überdenken. Alles, was Sie tun, ist, auf eine Eigenschaft zuzugreifen und sie einzustellen. Das ist es.

Okay, also einige grundlegende dom: Wenn Sie dies in direktem JavaScript tun würden, würden Sie Folgendes 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 .prop () - Funktion verwenden, um eine Eigenschaft festzulegen. Gehen Sie dazu 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 das nicht funktioniert.

7
Yitzhak

.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;
    }
});
7
Shujaath Khan

Dies funktioniert sicher für Select Control :

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

Ist alter Post aber hier ist eine einfache Funktion, die wie jQuery-Plugin wirkt.

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

Warum dies so ist, liegt daran, dass Sie das ausgewählte Satemant in DOM umwandeln, was vom Crossbrowser unterstützt wird.

Ist in der Regel menschliche Handlungssimulation.

3
Ivijan Stefan Stipić

Geben Sie einfach diesen Code ein:

$("#Controls_ID").val(value);
3
Osama khodrog

Versuche dies. Einfaches, aber effektives JavaSkript + jQuery die tödliche Combo.

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 standardmäßig beim Start 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 bei anyEvent auf, um die Option auszuwählen

Eine Mischung aus jQuery + JavaScript macht den Zauber ...

3
Majid Ali Khan
  • Sie müssen berücksichtigen, dass der Wert, den Sie dynamisch ändern möchten, derselbe sein muss, der in den Optionen, die Sie in Ihrem HTML-Code definieren, vorhanden ist, da es case sensative ist. Sie können Ihre Auswahlbox dynamisch wie folgt ändern:

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

2
Shahrukh Anwar

Ein Problem, auf das ich gestoßen bin, wenn 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...
0
Ryan

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
    });
0
Mohammed Muzammil

Der beste Weg ist wie folgt:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
0
Daniel Carpio Contreras

Es scheint ein Problem mit ausgewählten Dropdown-Steuerelementen zu geben, das sich nicht dynamisch ändert, wenn die Steuerelemente dynamisch erstellt werden, anstatt sich in 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 Addendum funktionierte die erste Codezeile ohne die zweite transparent. Das Abrufen des ausgewählten Index war nach dem Festlegen des Index korrekt, und wenn Sie tatsächlich auf das Steuerelement klickten, wurde das richtige Element angezeigt, was jedoch nicht berücksichtigt wurde in der oberen Beschriftung des Steuerelements.

Hoffe das hilft.

0
user2288580