更改 HTML 选择元素的选定选项

加价

<select id="my_select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>

JQuery

var my_value = 2;
$('#my_select option').each(function(){
var $this = $(this); // cache this jQuery object to avoid overhead


if ($this.val() == my_value) { // if this option's value is equal to our value
$this.prop('selected', true); // select this option
return false; // break the loop, no need to look further
}
});

演示

香草 JavaScript

使用普通的 JavaScript:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
if (opt.value == val) {
sel.selectedIndex = j;
break;
}
}
}

<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<button id="btn">Select Fish</button>

JQuery

但是如果你想使用 jQuery:

var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});

var val = 'Fish';
$('#btn').on('click', function() {
$('#sel').val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<button id="btn">Select Fish</button>

JQuery-使用值属性

如果您的选项具有与其文本内容不同的值属性，并且您希望通过文本内容进行选择:

<select id="sel">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
<script>
var val = 'Fish';
$('#sel option:contains(' + val + ')').prop({selected: true});
</script>

演示

但是，如果您已经设置了上述功能，并且希望使用 jQuery 按值进行选择，那么可以像前面那样:

var val = 3;
$('#sel').val(val);

现代版 DOM

对于支持 document.querySelector和 HTMLOptionElement::selected属性的浏览器，这是完成这项任务的一种更简洁的方法:

var val = 3;
document.querySelector('#sel [value="' + val + '"]').selected = true;

演示

Knockout.js

<select data-bind="value: val">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
<script>
var viewModel = {
val: ko.observable()
};
ko.applyBindings(viewModel);
viewModel.val(3);
</script>

演示

聚合物

<template id="template" is="dom-bind">
<select value="\{\{ val }}">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
</template>
<script>
template.val = 3;
</script>

演示

角度2

注意: 对于最终的稳定版本，这个版本还没有更新。

<app id="app">
<select [value]="val">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
</app>
<script>
var App = ng.Component({selector: 'app'})
.View({template: app.innerHTML})
.Class({constructor:  function() {}});


ng.bootstrap(App).then(function(app) {
app._hostComponent.instance.val = 3;
});
</script>

演示

Vue 2

<div id="app">
<select v-model="val">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Fish</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
val: null,
},
mounted: function() {
this.val = 3;
}
});
</script>

演示

测试这个演示

1. 根据它的 < em > 值选择 Option

   var vals = [2,'c'];
   
   
   $('option').each(function(){
   var $t = $(this);
   
   
   for (var n=vals.length; n--; )
   if ($t.val() == vals[n]){
   $t.prop('selected', true);
   return;
   }
   });
   

2. Selecting Option based on its text

   var vals = ['Two','CCC'];                   // what we're looking for is different
   
   
   $('option').each(function(){
   var $t = $(this);
   
   
   for (var n=vals.length; n--; )
   if ($t.text() == vals[n]){            // method used is different
   $t.prop('selected', true);
   return;
   }
   });
   

Supporting HTML

<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>


<select>
<option value=""></option>
<option value="a">AAA</option>
<option value="b">BBB</option>
<option value="c">CCC</option>
</select>

稍微整洁一点的 Vanilla.JS 版本。假设您已经修复了 nodeList缺失的 .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

只要:

var requiredValue = 'i-50332a31',
selectBox = document.querySelector('select')


selectBox.childNodes.forEach(function(element, index){
if ( element.value === requiredValue ) {
selectBox.selectedIndex = index
}
})

这里没有一个使用 jquery 的例子是正确的，因为它们将保留显示第一个条目的选择，即使值已经更改。

选择阿拉斯加的正确方法，并让选择显示正确的项目，使用:

<select id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>

使用 jquery 可以是:

$('#state').val('AK').change();

非常好的答案——这是 D3版本，任何人都可以看到:

<select id="sel">
<option>Cat</option>
<option>Dog</option>
<option>Fish</option>
</select>
<script>
d3.select('#sel').property('value', 'Fish');
</script>

您可以使用 JavaScript 更改 select 元素的值，它将选中的选项更改为具有该值的选项:

document.getElementById('sel').value = 'bike';​​​​​​​​​​

演示

我想将 select 元素的选项的 value & textContent (我们看到的)更改为‘ Mango’。

最简单的代码如下:

var newValue1 = 'Mango'


var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

希望能有所帮助，祝你好运。
如果这对你有帮助的话，请投赞成票。

我使用了几乎所有的答案张贴在这里，但不舒服，所以我挖一步进一步，找到了简单的解决方案，适合我的需要，觉得值得与你们分享。
不需要遍历所有选项或者使用 JQuery，你可以通过简单的步骤使用核心 JS:

例子

<select id="org_list">
<option value="23">IBM</option>
<option value="33">DELL</option>
<option value="25">SONY</option>
<option value="29">HP</option>
</select>

因此，您必须知道要选择的选项的值。

function selectOrganization(id){
org_list=document.getElementById('org_list');
org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

如何使用？

selectOrganization(25); //this will select SONY from option List

欢迎你的评论:) AzmatHunzai。

经过大量的搜索，我试图在选择列表中@kzh，我只知道 option内部文本，而不是 value属性, 这个代码基于选择答案我用它来改变选择选项根据当前页面 urlon 这种格式 http://www.example.com/index.php?u=Steve

<select id="sel">
<option>Joe</option>
<option>Steve</option>
<option>Jack</option>
</select>
<script>
var val = window.location.href.split('u=')[1]; // to filter ?u= query
var sel = document.getElementById('sel');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {
// search are based on text inside option Attr
if(opt.text == val) {
sel.selectedIndex = j;
break;
}
}
</script>

这将保持 url参数显示为选择，使其更加用户友好和访问者知道什么网页或配置文件，他当前正在查看。

在更新了一个寄存器并通过 ajax 更改了请求的状态之后，我使用了这个函数，然后我使用同一个脚本中的新状态执行一个查询，并将其放在 select 标记元素 new state 中以更新视图。

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

希望这个有用。

selectElement是 html <select>元素。

增加价值:

selectElement.selectedIndex++

减少价值:

selectElement.selectedIndex--

你只需要写代码

var theVal = 1;


$('#variable_id').val(theVal).trigger('change');