Question

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

Answer 1

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

Demo

但是如果你确实有上面的设置，并希望使用jQuery按值选择，你可以像以前一样：

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

现代DOM

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

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

Demo

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>

Demo

Polymer

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

Demo

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

Demo

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>

Demo

Answer 2

这里使用jquery的所有示例实际上都不正确，因为即使值已更改，它们也会使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();

Answer 3

标记

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

Demo

Answer 4

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

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

DEMO

Answer 5

我想要更改选择元素的所选选项的值和＆amp; textContent（我们看到的）＆＃39; Mango＆＃39;。

最简单的代码如下：

var newValue1 = 'Mango'

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

希望有人帮助。祝你好运。
如果这对你有所帮助，可以投票。

Answer 6

Test this Demo

根据值

选择选项

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

根据文本

选择选项

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>

Answer 7

优秀的答案 - 这是D3版本，适合所有人：

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

Answer 8

我几乎使用了这里发布的所有答案，但对此并不满意，所以我再挖一步，找到符合我需要的简单解决方案，并且觉得值得与你们分享。
而不是遍历所有选项或使用 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。

Answer 9

经过大量搜索后，我在选择列表中尝试了@kzh，我只知道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

这将使private SetupLabels(TrayDetails trayDetails) { this.label1.Text = (trayDetails != null) ? trayDetails.Id : string.Empty; // Set more labels here }参数显示为已选中，以使其更加用户友好，并且访问者知道他当前正在查看的页面或个人资料。

Answer 10

我在更新寄存器并通过ajax更改了请求状态后使用了这个，然后我在同一个脚本中使用新状态进行查询，并将其置于select标签元素的新状态以更新视图。

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

我希望这很有用。

Answer 11

selectElement 是一个 html <select> 元素。

增加值：

selectElement.selectedIndex++

递减值：

selectElement.selectedIndex--

Answer 12

var accHos = document.getElementById("accHos");
function showName(obj) {
  accHos.selectedIndex = obj.selectedIndex;
 }

div {
  color: coral;
}
select {
  margin-left: 20px;
  margin-bottom:  8px;
  min-width: 120px;
}

<div>Select Account Number:</div>
<select id="accNos" name="" onchange="showName(this);">
  <option value="">Select Account</option>
  <option value="">1052021</option>
  <option value="">2052021</option>
  <option value="">3052021</option>
  <option value="">4052021</option>
  <option value="">5052021</option>
</select>

<div>Account Holder Name:</div>
<select id="accHos" name="" disabled>
  <option value="">--Name--</option>
  <option value="">Suhan</option>
  <option value="">Cesur</option>
  <option value="">Hopper</option>
  <option value="">Rachel</option>
  <option value="">Arya</option>
 </select>
 <!-- Just for  my referece -->

Answer 13

你只需要写代码

var theVal = 1;

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

Answer 14

稍微整洁的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
  }
})

更改HTML Select元素的选定选项

14 个答案:

Vanilla JavaScript

的jQuery

jQuery - 使用值属性

Demo

现代DOM

Demo

Knockout.js

Demo

Polymer

Demo

Angular 2

Demo

Vue 2

Demo

标记

的jQuery

Demo

根据值

根据文本

支持HTML