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

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/

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 .

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

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

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 () .

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

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

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

Für mich hat das Folgende den Job gemacht

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

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

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

Der beste Weg ist wie folgt:

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

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

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.

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 .

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

$('#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>

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

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

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

Dies funktioniert sicher für Select Control :

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

Geben Sie einfach diesen Code ein:

$("#Controls_ID").val(value);

Quelle Link -

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>

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

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.

• 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

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.

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

Für mich geht das

$("#id_100").val("val2");

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