使用 javascript 代码从 HTML 的选择标记中读取选定的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6675125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
read selected value from select tag of HTML using javascript code
提问by Romi
My HTML code is as:
我的 HTML 代码如下：
<div id="detail">
<div class="d_left">
Page <strong>1</strong> of 107
</div>
<div class="d_center">
<table>
<tr>
<td><a href="#">Previous</a> | <a href="#">Next</a>
<img src="/webProject/store/images/arrow.png" align="absmiddle" alt="">
</td></tr></table>
</div>
<div class="d_right">
Sort by:
<select name="featured" size="1" id="item1">
<option>Featured Items1</option>
<option>Featured Items2</option>
<option>Featured Items3</option>
<option>Featured Items4</option>
</select>
</div>
</div>
Now, I want to read selected value from <select name="featured" size="1" id="item1">.
How can I do this using JavaScript?
现在，我想从<select name="featured" size="1" id="item1">. 我如何使用 JavaScript 做到这一点？
回答by Makram Saleh
document.getElementById("item1").value;
回答by Bakudan
More Elegant variant of sushil bharwanisolution
更优雅的sushil bharwani解决方案变体
function $(id){return document.getElementById(id);}
var select = $("item1");
select.onchange = function() {
var selIndex = select.selectedIndex;
var selValue = select.options(selIndex).innerHTML;
}
As Shadow Wizarddo not like this solution I hope he will like that:
由于Shadow Wizard不喜欢这个解决方案，我希望他会喜欢：
var select = document.getElementById("item1");
select.onchange = function() {
var selIndex = select.selectedIndex;
var selValue = select.options(selIndex).innerHTML;
}
The main idea in these two example is to reduce the usage of getElementById. No point to execute it more than once - thus minimizing the access to the DOM.
这两个例子的主要思想是减少getElementById的使用。没有必要多次执行它 - 从而最大限度地减少对 DOM 的访问。
For those who feel brave enough :) there is this new thing querySelector()mdn, msdn IE dev center, msdn, w3 spec:
对于那些觉得足够勇敢的人:) 有这个新事物querySelector()mdn、msdn IE 开发中心、msdn、w3 规范：
var select = document.querySelector("#item1");
回答by sushil bharwani
document.getElementById("item1").onchange = function(){
var selIndex = document.getElementById("item1").selectedIndex;
var selValue = document.getElementById("item1").options[selIndex].innerHTML;
}
回答by Gurung
function delivery(x){
var country = x.value;
document.getElementById('lala').innerHTML = country;
}
<div id="lala"></div>
<form action="" method="post">
<select name="country" id="country" onChange="delivery(this)">
<option value='lala'>Select Country</option>
<option value='United_Kingdom'>United Kingdom</option>
<option value='Russia'>Russia</option>
<option value='Ukraine'>Ukraine</option>
<option value='France'>France</option>
<option value='Spain'>Spain</option>
<option value='Sweden'>Sweden</option>
</select>
</form>
Here is how i solved my problem for selecting eu countries (i have removed most of them to make my codes shorter).. as im new to javascript.. i still need to learn javascript libraries.
这是我如何解决选择欧盟国家的问题（我已经删除了其中的大部分以缩短我的代码）..因为我是 javascript 新手..我仍然需要学习 javascript 库。
