选择值为'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>

按值设置为Pending状态:

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

Use:

$("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;
} });

最简单的方法是:

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

输出:这将激活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;
    }
});

最好在设置select value之后使用change()。

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

通过这样做，代码将关闭更改用户的选择，解释包括在JS提琴:

JS小提琴

试试这个。

它简单而有效，是JavaScript + jQuery的致命组合。

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>

选择:

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

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

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

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

jQuery + JavaScript的混合物的魔力…

一个简单的答案是，在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>

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

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

这是简单的，100%的工作，因为它是从我的工作……：）

$ (" # graphtype选项(value = " ")”)。道具(“选择”,真正的);

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

当控件是动态创建的，而不是在静态HTML页面中时，选择下拉控件没有动态更改，这似乎是一个问题。

在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或类，而不是让它的父元素是一个id或类):

在这里，由于div有一个类来针对它内部的select，代码将是:

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

or

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

如果给类选择自己，代码将是:

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

or

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

or

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

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

值=“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

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

如果你给了你的选择元素ID，代码将是:

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

记住，当您像上面所说的那样更改选择值时，不会调用change方法。

也就是说，如果你写了一些代码来改变选择，上面的方法会改变选择值，但不会触发改变。

要触发change函数，必须在末尾添加.change()。

所以代码是:

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

这里有很多解决方案来改变所选的值，但没有一个对我有用，因为我的挑战与操作略有不同。我需要根据这个值过滤另一个选择下拉。

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

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

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

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

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

这将取消当前选中的所有<option>元素。选择第一个元素(使用选项[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事件有界，它也不会给出一个无限循环。

我已经准备了一个小的JQuery扩展，删除所有不必要的选项和隐藏所选的选项，用户只看到一个值在选择字段

$.prototype.makeReadOnly = function (canClick = false) {
    $(this).each(function () {
        $(this).readonly = true;
        if ($(this).is("select")) {
            if(!canClick) $(this).mousedown(function () { event.preventDefault(); }).keydown(function () { event.preventDefault(); });
            $(this).find('option:not(:selected)').remove();
            $(this).find('option').hide();
        }
    });
}

然后你可以让所有的选择都是只读的

$("select").makeReadOnly();

或者只选择特定的只读类

$("select.read-only").makeReadOnly();