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/
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 .
So wählen Sie eine Option mit dem Wert "val2" aus:
$('.id_100 option[value=val2]').attr('selected','selected');
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 ().
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 getan
$("div.id_100").val("val2").change();
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);
}
});
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);
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 ..
Am einfachsten geht das:
<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>
$('select[name="dept"]').val('3');
Ausgabe: Dadurch wirdENTaktiviert.
$('#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>
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));
}
var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");
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.
.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;
} });
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.
Geben Sie einfach diesen Code ein:
$("#Controls_ID").val(value);
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 ...
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
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...
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
});
Der beste Weg ist wie folgt:
$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);
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.