按值设置选择选项“选定”

要选择值为“val2”的选项：

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

取消选择所有第一个并过滤可选择的选项：

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

您可以使用属性选择器[attributename=optionalvalue]选择任何属性及其值，因此在您的情况下，您可以选择该选项并设置所选属性。

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

其中value是您希望选择的值。

如果您需要删除任何先前选定的值，就像多次使用的情况一样，您需要稍微更改它，以便首先删除选定的属性

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

有一种更简单的方法，不需要你进入选项标签：

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

看看这个jQuery方法。

注意：上面的代码不会触发更改事件。为了完全兼容，您需要这样调用它：

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

我认为最简单的方法是选择设置val（），但您可以检查以下内容。有关选项的更多详细信息，请参阅如何在jQuery中处理选择和选项标签？。

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

未优化，但以下逻辑在某些情况下也很有用。

$('.id_100 option').each(function() {if($(this).val() == 'val2') {$(this).prop("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></select>

按值设置为待定状态：

$('#contribution_status_id').val("2");

用途：

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

这对我有用。我正在使用此代码解析fancybox更新表单中的值，我来自app.js的完整源代码是：

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

我的PHP代码是：

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

选择值后使用change()事件。从留档：

如果字段在内容没有更改的情况下失去焦点，则不会触发事件。要手动触发事件，请在没有参数的情况下应用.change()：

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

更多信息在. change（）。

这肯定适用于选择控制：

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

最简单的方法是：

超文本标记语言

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

输出：这将激活ENT。

对我来说，以下工作

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

. attr（）有时在较旧的jQuery版本中不起作用，但您可以使用. prop（）：

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

最好在设置选择值后使用change()。

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

通过这样做，代码将接近更改用户选择，解释包含在jsfiddle中：

JS小提琴

试试这个。

它很简单，但有效，JavaScript+jQuery，致命的组合。

选择组件：

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

选型：

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

现在您的选项4将被选中。您可以这样做，以选择默认启动时的值。

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

或者创建一个简单的函数，将行放在其中并调用anyEvent上的函数来选择选项

jQuery+JavaScript的混合确实很神奇…

一个简单的答案是，在超文本标记语言中：

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

在jQuery中，通过按钮或其他方式调用下面的函数

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

它很简单，100%的作品，因为它取自我的工作…：）

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

这在#graphtype是选择标记的id的情况下效果很好。

示例选择标签：

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

这是一个类似于jQuery插件的简单函数。

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

你可以简单地做这样的事情：

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

使用它的原因是因为您将所选语句更改为DOM，这是跨浏览器支持的，并且还会触发更改以使您可以捕获它。

它基本上是一个人类行为模拟。

没有任何理由去想这件事。你所做的只是访问和设置一个属性。就是这样。

好的，所以一些基本的DOM：

如果你在直接的JavaScript中这样做，你会这样做：

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

但你不是用直接的JavaScript来做，而是用jQuery来做。在jQuery中，你想使用. prop（）函数来设置一个属性，所以你会这样做：

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

不管怎样，只要确保你的ID是唯一的。否则，你会把你的头撞到墙上，想知道为什么这不起作用。

最好的方法是这样的：

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

在动态创建控件而不是在静态超文本标记语言页面中时，选择下拉控件不动态更改似乎存在问题。

在jQuery中，这个解决方案对我很有效。

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

就像附录一样，没有第二行的第一行代码实际上透明地工作，在设置索引后检索选定的索引是正确的，如果您实际单击了控件，它将显示正确的项目，但这并没有反映在控件的顶部标签中。

当值是ID而文本是代码时遇到的问题。您无法使用代码设置值，但您无法直接访问ID。

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

它为我工作：

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

你可以通过不同的方法来实现这一点（记住，如果要操作一个元素，最好给它一个id或class，而不是让它的父元素是id或class）：

在这里，由于div有一个类来定位它里面的选择，代码将是：

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

或

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

如果类被赋予选择自己的权利，代码将是：

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

或

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

或

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

要动态传递值，代码将是：

valu="val2"；

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

如果通过Ajax添加元素，您必须为您的元素提供“id”并使用：

window.document.getElementById

否则，您将不得不为您的元素提供“类”并使用

window.document.getElementById

您还可以通过其索引号选择选择元素的值。

如果您为选择元素提供了ID，则代码将是：

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

请记住，当您如上所述更改选择值时，不会调用改变方法。

也就是说，如果您已经编写了代码来执行一些更改选择的操作，上述方法将更改选择值，但不会触发更改。

要触发改变函数，您必须在末尾添加. change（）。

所以代码将是：

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

这里有很多解决方案可以更改所选值，但它们都不适合我，因为我的挑战与OP略有不同。我需要根据此值过滤另一个选择下拉列表。

大多数人使用$("div.id_100").val("val2").change();让它为他们工作。我不得不稍微修改一下$("div#idOfDiv select").val("val2").trigger("change")。

这也不够，我还必须确保我等待文档加载。我的完整代码如下所示：

$(document).ready(function() {$("div#idOfDiv select").val("val2").trigger("change");});

我需要选择一个选项，但两个选项可能具有相同的值。
这纯粹是为了视觉（前端）差异。
您可以选择一个选项（即使2具有相同的值），如下所示：

let options = $('#id_100 option')options.prop('selected', false)   // Deselect all currently selected oneslet option = $(options[0])        // Select option from the listoption.prop('selected', true)option.parent().change()          // Find the <select> element and call the change() event.

这将取消选择所有当前选定的<option>元素。选择第一个（使用options[0]）并使用change事件更新<select>元素。

感谢愚蠢的回答：

在我的情况下，我需要使用

$('.id_100 option').removeAttr('selected').filter('[value=val1]').prop('selected', true);
$('.id_100').val("val1").change(); // I need to set the same value here for my next form submit.

为我的下一个表单提交设置正确的值。使用它时，即使我有另一个on change事件有界，它也不会给出无限循环。