使用JavaScript代码从HTML的select标签中读取选定的值

Question

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

现在，我想从<select name="featured" size="1" id="item1">中读取所选值。我该如何使用JavaScript实现？

- Romi

---

你想什么时候读它？是作为响应什么事件呢？ - Shadow The Spring Wizard

Answer 1

document.getElementById("item1").value;

- Makram Saleh

---

James Allardice：你的意思是不需要像detai1.item1那样做？ - Romi

@Makram，这不起作用，因为当前的HTML中的选项没有值。 - sushil bharwani

@sushil bharwani 实际上它会工作，因为第一个选项总是被选中的 - http://jsfiddle.net/VUNb3/ - Bakudan

Answer 2

更优雅的 sushil bharwani解决方案

function $(id){return document.getElementById(id);}

var select = $("item1");
select.onchange = function() {
    var selIndex = select.selectedIndex;
    var selValue = select.options(selIndex).innerHTML;
}

由于Shadow Wizard不喜欢这个解决方案，我希望他会喜欢这个:

var select = document.getElementById("item1");
select.onchange = function() {
    var selIndex = select.selectedIndex;
    var selValue = select.options(selIndex).innerHTML;
}

这两个例子的主要思想是减少getElementById的使用。没有必要执行多次 - 因此最小化对DOM的访问。

对于那些感到勇敢的人 :)，有这个新东西querySelector()^{mdn, msdn IE dev center, msdn, w3 spec}:

var select = document.querySelector("#item1");

- Bakudan

---

你在哪里看到jQuery的？为什么你认为它可以被使用？ - Shadow The Spring Wizard

@Shadow Wizard 这是纯JavaScript - 没有涉及jQuery。它不是选择器，而是getElementById的简写。函数名称可以以a-z A-Z $ _开头。 - Bakudan

抱歉，大家。我太久以前一直使用IE7，现在才发现options也可以作为函数访问，而$的东西也让我感到困惑。撤销投票，将来会花更多时间阅读和测试。 - Shadow The Spring Wizard

select.options(selIndex) 不起作用，select.options[selIndex] 可以正常工作。 - bora.oren

Answer 3

document.getElementById("item1").onchange = function(){
var selIndex = document.getElementById("item1").selectedIndex;
var selValue = document.getElementById("item1").options[selIndex].innerHTML;
}

- sushil bharwani

---

一行代码中有两个错误：options 是一个数组，而 option 元素没有 innerHTML，只有 value 或 text。 - Shadow The Spring Wizard

好的，现在你已经修复了数组部分（使用方括号），在所有主要浏览器中都可以正常工作 - innerHTML很久以前就不能用了，我猜它在IE7及以上版本中被“修复”了。 - Shadow The Spring Wizard

Answer 4

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>

这是我解决选择欧盟国家问题的方法（我已删除大部分内容以使我的代码更短）... 因为我是 JavaScript 的新手... 我仍然需要学习 JavaScript 库。

- Gurung