blocks|key|569800|text|标记|type|unstyled|depth|inlineStyleRanges|entityRanges|data|569801|<select+id="my_select">
++++<option+value="1">First</option>
++++<option+value="2">Second</option>
++++<option+value="3">Third</option>
</select>|code-block|syntax|javascript|569802|jQuery|569803|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
++++}
});|569804|Demo|offset|length|569805|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Shef/yU6uT/^0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<h3>Markup</h3>

<pre><code>&lt;select id="my_select"&gt;
    &lt;option value="1"&gt;First&lt;/option&gt;
    &lt;option value="2"&gt;Second&lt;/option&gt;
    &lt;option value="3"&gt;Third&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<h3>jQuery</h3>

<pre><code>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
    }
});
</code></pre>

<h2><a href="http://jsfiddle.net/Shef/yU6uT/">Demo</a></h2>


blocks|key|785970|text|稍微整洁一些的Vanilla.JS版本。假设您已经修复了缺少.forEach()的nodeList|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|785971|NodeList.prototype.forEach+=+Array.prototype.forEach|code-block|syntax|javascript|785972|只要：|785973|var+requiredValue+=+'i-50332a31',+++
++selectBox+=+document.querySelector('select')

selectBox.childNodes.forEach(function(element,+index){
++if+(+element.value+===+requiredValue+)+{
++++selectBox.selectedIndex+=+index
++}
})|785974|entityMap^0|U|A|15|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>Slightly neater Vanilla.JS version. Assuming you've already fixed <code>nodeList</code> missing <code>.forEach()</code>:</p>

<pre><code>NodeList.prototype.forEach = Array.prototype.forEach
</code></pre>

<p>Just:</p>

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

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})
</code></pre>


blocks|key|569939|text|这里使用jquery的示例实际上没有一个是正确的，因为即使值已经更改，它们也会让select显示第一个条目。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|569940|选择阿拉斯加的正确方法是使用以下命令让选择显示所选的正确项目：|569941|<select+id="state">
++++<option+value="AL">Alabama</option>
++++<option+value="AK">Alaska</option>
++++<option+value="AZ">Arizona</option>
</select>|code-block|syntax|javascript|569942|使用jquery将会是：|569943|$('#state').val('AK').change();|569944|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>None of the examples using jquery in here are actually correct as they will leave the select displaying the first entry even though value has been changed.</p>

<p>The right way to select Alaska and have the select show the right item as selected using:</p>

<pre><code>&lt;select id="state"&gt;
    &lt;option value="AL"&gt;Alabama&lt;/option&gt;
    &lt;option value="AK"&gt;Alaska&lt;/option&gt;
    &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>With jquery would be:</p>

<pre><code>$('#state').val('AK').change();
</code></pre>


blocks|key|570006|text|非常好的答案--这是D3版本，适合任何想看的人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570007|<select+id="sel">
++++<option>Cat</option>
++++<option>Dog</option>
++++<option>Fish</option>
</select>
<script>
++++d3.select('#sel').property('value',+'Fish');
</script>|code-block|syntax|javascript|570008|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Excellent answers - here's the D3 version for anyone looking:</p>

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


blocks|key|570065|text|您可以使用JavaScript更改select元素的值，这会将选定选项更改为具有该值的选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570066|document.getElementById('sel').value+=+'bike';​​​​​​​​​​|code-block|syntax|javascript|570067|DEMO|offset|length|570068|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ivinraj/xkqTR/1413/^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can change the value of the select element, which changes the selected option to the one with that value, using JavaScript:</p>

<pre><code>document.getElementById('sel').value = 'bike';​​​​​​​​​​
</code></pre>

<p><a href="http://jsfiddle.net/ivinraj/xkqTR/1413/" rel="noreferrer">DEMO</a></p>


blocks|key|570136|text|我想把select元素的select选项的&+textContent值(我们看到的)改为'Mango‘。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570137|最简单的代码如下：|570138|var+newValue1+=+'Mango'

var+selectElement+=+document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value+=+newValue1;
selectElement.options[selectElement.selectedIndex].textContent+=+newValue1;|code-block|syntax|javascript|570139|希望这能帮助到一些人。祝你好运。|570140|如果这对你有帮助，请投票支持。|570141|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I want to change the select element's selected option's both value &amp; textContent (what we see) to 'Mango'.</p>

<p>Simplest code that worked is below:</p>

<pre><code>var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;
</code></pre>

<p>Hope that helps someone. Best of luck.<br>
Up vote if this helped you.</p>


blocks|key|570253|text|经过大量的搜索，我尝试了@kzh在select列表上，我只知道option内部的文本而不知道value属性，这段基于select答案的代码我用它来根据当前页面的url在这个格式的http://www.example.com/index.php?u=Steve上更改选择选项|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|570254|<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%2B%2B)+{
++++++++//+search+are+based+on+text+inside+option+Attr
++++++++if(opt.text+==+val)+{
++++++++++++sel.selectedIndex+=+j;
++++++++++++break;
++++++++}
++++}
</script>|code-block|syntax|javascript|570255|这将保持url参数显示为选中状态，以使其更加用户友好，并且访问者知道他当前正在查看的页面或配置文件。|570256|entityMap^0|V|6|1A|5|28|3|2H|14|0|0|4|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$]]

<p>After a lot of searching I tried @kzh on select list where I only know <code>option</code> inner text not <code>value</code> attribute, 
this code based on select answer I used it to change select option according to current page <code>url</code>on this format 
<code>http://www.example.com/index.php?u=Steve</code></p>

<pre><code>&lt;select id="sel"&gt;
    &lt;option&gt;Joe&lt;/option&gt;
    &lt;option&gt;Steve&lt;/option&gt;
    &lt;option&gt;Jack&lt;/option&gt;
&lt;/select&gt;
&lt;script&gt;
    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;
        }
    }
&lt;/script&gt;
</code></pre>

<p>This  will keeps <code>url</code> parameters shown as  selected to make it more user friendly and the visitor knows what page or profile he is currently viewing . </p>


blocks|key|786402|text|我在更新注册表并通过ajax更改了请求的状态后使用了它，然后在同一脚本中使用新状态执行查询，并将其放入select标记元素的新状态以更新视图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|786403|var+objSel+=+document.getElementById("selectObj");
objSel.selectedIndex+=+elementSelected;|code-block|syntax|javascript|786404|我希望这是有用的。|786405|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I used this after updating a register and changed the state of request via ajax, then I do a query with the new state in the same script and put it in the select tag element new state to update the view.</p>

<pre><code>var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;
</code></pre>

<p>I hope this is useful.</p>


blocks|key|786428|text|selectElement是一个html+<select>元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|786429|递增该值：|786430|selectElement.selectedIndex%2B%2B|code-block|syntax|javascript|786431|递减该值：|786432|selectElement.selectedIndex--|786433|entityMap^0|0|D|L|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p><code>selectElement</code> is a html <code>&lt;select&gt;</code> element.</p>
<p>Increment the value:</p>
<pre><code>selectElement.selectedIndex++
</code></pre>
<p>Decrement the value:</p>
<pre><code>selectElement.selectedIndex--
</code></pre>


blocks|key|570365|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570366|var+accHos+=+document.getElementById("accHos");
function+showName(obj)+{
++accHos.selectedIndex+=+obj.selectedIndex;
+}|code-block|syntax|javascript|570367|div+{
++color:+coral;
}
select+{
++margin-left:+20px;
++margin-bottom:++8px;
++min-width:+120px;
}|570368|<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>
+|570369|570370|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var accHos = document.getElementById("accHos");
function showName(obj) {
  accHos.selectedIndex = obj.selectedIndex;
 }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  color: coral;
}
select {
  margin-left: 20px;
  margin-bottom:  8px;
  min-width: 120px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;Select Account Number:&lt;/div&gt;
&lt;select id="accNos" name="" onchange="showName(this);"&gt;
  &lt;option value=""&gt;Select Account&lt;/option&gt;
  &lt;option value=""&gt;1052021&lt;/option&gt;
  &lt;option value=""&gt;2052021&lt;/option&gt;
  &lt;option value=""&gt;3052021&lt;/option&gt;
  &lt;option value=""&gt;4052021&lt;/option&gt;
  &lt;option value=""&gt;5052021&lt;/option&gt;
&lt;/select&gt;

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


blocks|key|570384|text|您只需编写代码即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|570385|var+theVal+=+1;

$('#variable_id').val(theVal).trigger('change');|code-block|syntax|javascript|570386|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You just write the code</p>
<pre class="lang-js prettyprint-override"><code>var theVal = 1;

$('#variable_id').val(theVal).trigger('change');
</code></pre>


<p>In my HTML, I have a <code>&lt;select&gt;</code> with three <code>&lt;option&gt;</code> elements.  I want to use jQuery to check each option's value against a Javascript <code>var</code>.  If one matches, I want to set the selected attribute of that option.  How would I do that?</p>


Changing the selected option of an HTML Select element

jQuery

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

问更改HTML Select元素的选定选项
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改HTML Select元素的选定选项EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改HTML Select元素的选定选项
EN