javascript获取下拉列表框当中的文本值示例代码_javascript技巧
程序员文章站
2022-04-14 12:06:24
...
近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码:
也就是说当用户选择“上海”这一列时,需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码:
function isSelected(value) {
var cityName;
var city = document.getElementById("city");
//获取选中的城市名称
for(i=0;iif(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页面上有一个下拉框,并为此下拉框定了一个“city”的id,并为其绑定了一个onchange事件,通过此事件调用javascript函数。
在javascript函数当中,通过domcument对象获取当前下拉框的节点元素,由于节点的值并非只有一个,所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中,如果选中则使用city[i].innerText 方式获取当前所选中的文本值。当然如果需要获取选项值,只需如此即可:city[i].value.
至此,通过以上方法在IE下已能达到所要的结果。但是,在FIREFOX下测试时,发现此法不起作用,最后通过查阅资料发现另外一个方法。将city[i].innerText 改为 city[i].text即可。这种方法对IE及FIXEFOX都适用!
复制代码 代码如下:
也就是说当用户选择“上海”这一列时,需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码:
复制代码 代码如下:
function isSelected(value) {
var cityName;
var city = document.getElementById("city");
//获取选中的城市名称
for(i=0;i
cityName = city[i].innerText; //关键点
alert("cityName:" + cityName);
}
}
也可以这么做:
复制代码 代码如下:
function isSelected(value) {
var city = document.getElementById("city");
alert(city.options[city.selectedIndex].innerText);
}
大致解释一下,首先在HTML页面上有一个下拉框,并为此下拉框定了一个“city”的id,并为其绑定了一个onchange事件,通过此事件调用javascript函数。
在javascript函数当中,通过domcument对象获取当前下拉框的节点元素,由于节点的值并非只有一个,所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中,如果选中则使用city[i].innerText 方式获取当前所选中的文本值。当然如果需要获取选项值,只需如此即可:city[i].value.
至此,通过以上方法在IE下已能达到所要的结果。但是,在FIREFOX下测试时,发现此法不起作用,最后通过查阅资料发现另外一个方法。将city[i].innerText 改为 city[i].text即可。这种方法对IE及FIXEFOX都适用!
下一篇: 关于CSS制作边框效果的一些技巧
推荐阅读
-
javascript 获取select下拉列表值的代码
-
用javascript获取任意颜色的更亮或更暗颜色值示例代码
-
javascript 获取select下拉列表值的代码
-
JavaScript和JQuery获取DIV值方法的示例代码分享
-
js获取url中指定参数值的示例代码_javascript技巧
-
JS 获取select(多选下拉)中所选值的示例代码_javascript技巧
-
js获取判断上传文件后缀名的示例代码_javascript技巧
-
JS 获取span标签中的值的代码 支持ie与firefox_javascript技巧
-
父节点获取子节点的字符串示例代码_javascript技巧
-
Js中获取frames中的元素示例代码_javascript技巧