来自 金沙js77888 2019-09-14 08:06 的文章
当前位置: 金沙js77888 > 金沙js77888 > 正文

就是需要将用户点击下拉列表当中某个选项后

近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的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页面上有一个下拉框,并为此下拉框定了一个“city”的id,并为其绑定了一个onchange事件,通过此事件调用javascript函数。

在javascript函数当中,通过domcument对象获取当前下拉框的节点元素,由于节点的值并非只有一个,所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中,如果选中则使用city[i].innerText 方式获取当前所选中的文本值。当然如果需要获取选项值,只需如此即可:city[i].value.

至此,通过以上方法在IE下已能达到所要的结果。但是,在FIREFOX下测试时,发现此法不起作用,最后通过查阅资料发现另外一个方法。将city[i].innerText 改为 city[i].text即可。这种方法对IE及FIXEFOX都适用!

您可能感兴趣的文章:

  • jquery json 通用三级联动下拉列表
  • js select多选列表传值代码
  • extjs 列表框(multiselect)的动态添加列表项的方法
  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
  • extJs 文本框后面加上说明文字 下拉列表选中值后触发事件
  • JS无限树状列表实现代码
  • javascript级联下拉列表实例代码(自写)
  • js实现下拉列表选中某个值的方法(3种方法)
  • javascript 输入框提示列表效果
  • js仿搜狐视频记录片列表展示效果

本文由金沙js77888发布于金沙js77888,转载请注明出处:就是需要将用户点击下拉列表当中某个选项后

关键词: