更改HTML Select元素的选定选项

148

在我的HTML中，我有一个<select>包含三个<option>元素的元素。我想使用jQuery针对Javascript检查每个选项的值var。如果一个匹配，我想设置该选项的选定属性。我该怎么办？

javascript  jquery  html 
— 生命力
source
发布您的HTML。但以通常的方式：$('#myselectid').val()
— Samich 2011年
9
不知道为什么他被否决了，他是新用户，这个问题似乎合法。
— vol7ron 2011年

Answers:

323

香草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);
});

显示代码段

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>

演示版

— zh
source
1
这特别有用，因为我不确定如何设置选定的属性。我不知道有一个selectedIndex。谢谢。
— llihttocs 2011年
1
@aelgoa jsperf.com/option-select-loop/2我更正了您的第一个代码片段，以更加模仿我的代码，这使我的速度变慢。我使用后增量而不是前增量，然后添加了另一个测试，该测试比您的第三个测试快一点。
— kzh13 2013年
1
为虐待狂：document.evaluate(".//select[@id='sel']/option[text()='Fish']", document.body, null, 9, null).singleNodeValue.selected = true;
— kzh
1
@llihttocs现在呢？
— kzh 2014年
1
感谢您提供香草javascript-对于那些喜欢为自己编写代码的人:)
— Peter Cullen
24

实际上，这里使用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();
— 贾斯汀·布斯（Justin Buser）
source
19

您可以使用JavaScript更改select元素的值，从而将选择的选项更改为具有该值的选项。

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

演示

— 伊文·拉吉（Ivin Raj）
source
1
由于时间问题，您的示例无法正常运行。我对其进行了更新，以等待用户单击按钮： jsfiddle.net/xkqTR/3271
— dlaliberte
这不会触发select元素上的change事件。您对此有解决方案吗？
— DragonKnight
10

标记

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

演示版

— 棚架
source
我认为这正是我所需要的。我已经使用了几行代码，它似乎可以工作。感谢您的精彩摘录。
— llihttocs 2011年
@llihttocs：很高兴我帮了忙。通过单击答案左上方投票数下方的空白框，可以随时接受可以解决您问题的答案。这样这个问题就被标记为已解决，其他将寻求相同解决方案的人将很容易找到答案。
— 货架
4

我想将select元素的selected选项的value和textContent（我们所看到的）都更改为'Mango'。

最简单的代码如下：

var newValue1 = 'Mango'

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

希望能对某人有所帮助。祝你好运。
如果这对您有帮助，请进行投票。

— 马诺哈尔·雷迪·波迪
source
2

测试此演示

  1. 根据其值选择选项

    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. 根据其文本选择选项

    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>
— vol7ron
source
1
这个例子非常有用。我不确定如何遍历选项并设置所选属性。感谢您提供完整的答案。
— llihttocs 2011年
没问题，请确保单击对您有帮助的问题/评论旁边的向上箭头。然后选中您选择的答案旁边的复选标记。-您可以选择不花任何
— 钱就
1

出色的答案-这是适合任何人的D3​​版本：

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>
— 特里斯坦·里德（Tristan Reid）
source
1

我几乎使用了此处发布的所有答案，但对此不太满意，因此我进一步研究了一步，找到了适合我需要的简单解决方案，并感到值得与大家分享。
无需遍历所有选项或使用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。

— 阿兹玛特·卡里姆·汗（Azmat Karim Khan）
source
1

经过大量搜索后，我在选择列表中尝试了@kzh，但我只知道option内部文本不value属于该属性，基于选择答案的这段代码我根据当前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显示的参数保持选中状态，以使其更加用户友好，并且访问者知道他当前正在查看的页面或个人资料。

— 塞勒姆
source
0

我在更新寄存器后使用了它，并通过ajax更改了请求状态，然后在同一脚本中对新状态进行了查询，并将其放入选择标记元素新状态中以更新视图。

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

我希望这是有用的。

— 用户名
source
-1

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
  }
})
— 迈克马卡纳
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.