JavaScript获取下拉列表选中文本值的兼容方案

获取下拉列表选中文本值的实现

近期遇到一个需求，需要记录用户在下拉列表中选择特定选项后的内容。例如，参考以下HTML结构：

 
<select onchange="isSelected(this.value);" id="city">
<option value="1">北京</option>
<option value="2" >上海</option>
<option value="2" >广州</option>
</select>

假设用户选择了“上海”，我们需要保存其显示的文本名称。实现这一功能的方法并不复杂，具体JavaScript实现如下：

 
function isSelected(value) {
var cityName;
var city = document.getElementById("city");
// 获取选中的城市名称
for(i=0;i<city.length;i++){
if(city[i].selected==true){
cityName = city[i].innerText; // 关键步骤
alert("cityName:" + cityName);
} 
} 

另一种实现方式如下：

 
function isSelected(value) {
var city = document.getElementById("city");
alert(city.options[city.selectedIndex].innerText);
} 

代码逻辑与兼容性处理

基本思路是：在HTML页面中定义一个ID为“city”的下拉框，并绑定onchange事件以调用JavaScript函数。

在JS函数中，首先通过document对象获取下拉框节点。由于下拉框包含多个选项，需遍历这些节点以查找当前选中的项。遍历过程中，判断当前选项是否被选中（selected为true），若选中则通过city[i].innerText获取其文本值。若需获取选项的value属性值，可直接使用city[i].value。

上述方法在IE浏览器中运行正常。但在Firefox浏览器中测试时发现无效。经查阅资料，发现将city[i].innerText替换为city[i].text即可解决兼容性问题。该方式在IE和Firefox中均能正常工作。