更改HTML Select元素的选定选项
在我的HTML中，我有一个带有三个<option>元素的<select> 。 我想使用jQuery检查每个选项的价值对一个Javascript var 。 如果匹配，我想设置该选项的选定属性。 我该怎么做？
香草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的例子实际上是正确的，因为他们将离开显示第一个条目的select，即使值已经改变。
select阿拉斯加的正确方法是使用以下命令显示正确的项目：
<select id="state"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> </select>
与jQuery的将是：
$('#state').val('AK').change();
标记
<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 } });
演示
testing这个演示
-
根据其值select期权
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; } }); -
根据文本select选项
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; } });
支持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>
优秀的答案 – 这是D3版本的任何人看：
<select id="sel"> <option>Cat</option> <option>Dog</option> <option>Fish</option> </select> <script> d3.select('#sel').property('value', 'Fish'); </script>
您可以使用javascriptselect值：
document.getElementById('sel').value = 'bike';
DEMO
我想将select元素的选定的选项的值和textContent（我们所看到的）更改为“芒果”。
最简单的代码工作如下：
var newValue1 = 'Mango' var selectElement = document.getElementById('myselectid'); selectElement.options[selectElement.selectedIndex].value = newValue1; selectElement.options[selectElement.selectedIndex].textContent = newValue1;
希望能帮助别人。 祝你好运。
如果这有助于你的投票。
我使用了几乎所有在这里发布的答案，但不舒服，所以我深入挖掘一步，find适合我的需求，感觉值得与大家分享的简单解决scheme。
而不是迭代所有的选项或使用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>
所以你必须知道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。
我更新了一个寄存器，并通过ajax更改了请求的状态，然后在同一脚本中使用新状态进行查询，并将其置于select标签元素的新状态以更新视图。
var objSel = document.getElementById("selectObj"); objSel.selectedIndex = elementSelected;
我希望这是有用的。
经过大量的search，我试图@kzh在select列表，我只知道option内部文本不值属性，这段代码基于select的答案我用它来改变select选项根据当前页面的url在这种格式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参数显示为被select，以使其更加用户友好，并且访问者知道他当前正在查看的页面或configuration文件。
稍微整洁的Vanilla.JS版本。 假设你已经修复nodeList缺less.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 } })
