关闭

通过事件实时获取<select>标签选项时需要注意的问题

时间: 2020-07-10阅读: 58标签: 事件

今天编写了一个下拉框事件,功能是根据用户选择不同省份,另一个下拉框实时更新出省份所在的城市。我编写了一个简单的测试用例后发现,不能简单地通过获取元素的值来进行判断,因为如果写出类似于“var province = document.getElementsById("ps").value”的话是有问题的(selected="select"表示预选项)。


通过查询各种资料,找到了一种解决方法(肯定还有其他方式……),就是:首先获取已经选择的选项下标,下标通常是从0开始,这里就不多赘述了,学过变成的小伙伴肯定都知道,获取下标后还没有完成,我们需要根据下标获取该下标对应选项中的value值,正如以下代码所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/JavaScript">

function province() {
var index = document.getElementById("ps").selectedIndex;
var p = document.getElementById("ps").options[index].value;
var c = document.getElementById("c").options;
console.log(p);
c.length = 0;
c.add(new Option("-请选择-", "-请选择-"));
if (p == "山东省") {
console.log("shandong");
c.add(new Option("济南", "济南"));
c.add(new Option("潍坊", "潍坊"));
}
if (p == "浙江省") {
console.log("zhejiang");
c.add(new Option("杭州", "杭州"));
c.add(new Option("宁波", "宁波"));
}
}

</script>
<body>

<span>省份</span>
<select id="ps" onchange="province()">
<option selected="selected">-请选择-</option>
<option value="山东省">山东省</option>
<option value="浙江省">浙江省</option>
</select>
<span>市区</span>
<select id="c">
<option selected="selected">-请选择-</option>
</select>

</body>
</html>

在以上代码的第11行和第12行中,首先获取了id名为“ps”的元素(也就是select)的已选中的选项下标,然后再根据下标获取到该选项的value值,其实可以直接把赋值给变量index的那段表达式直接放到第12行的index的位置,只是因为看起来不明了,所以我在这里分开写了。


总结:

//获取select标签已选中的选项下标
var index = document.getElementsById("<select>标签的id").selectedindex;


//根据选项下标获取对应选项的value值
var selectedvalue = document.getElementsById("<select>标签的id").options[index].value;

最后,虽然解决了问题,但是我还是觉得这种写法有些麻烦,所以,有时间会继续寻找更加简洁且高效的写法。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10061

关闭

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target

React 中阻止事件冒泡的问题

在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行。DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

浏览器事件之事件流

事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流,分别是事件冒泡流和事件捕获流。E的事件流称为事件冒泡,从最具体的元素开始,然后逐渐向上传播到文档节点。

JavaScript 事件

客户端 JavaScript 程序采用了异步事件驱动编程模型、事件不是 JavaScript 对象,不会出现在程序源代码中、事件类型是一个用来说明发生什么类型事件的字符串,有时会称之为事件名字

JS事件冒泡机制以及委托方法,以及vue中的stop

要理解事件冒泡机制,就得先了解事件。浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作。我们较为熟悉的事件有三大类型:鼠标键盘事件、页面事件、表单相关事件。

jquery的on绑定点击事件执行两次的解决办法

jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下

手写事件代理函数

面试是不是听过无数遍呢 !今天我们来手写一个这样的事件委托函数,它是通过事件冒泡机制,即子元素上触发的事件会冒泡到父级上, 即父级也会触发该类型的事件

网页浏览器缩放监听

这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮;ctrl配合-/+/0进行缩放。

JavaScript 和 Node.js 中的“事件驱动”是什么意思?

事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式。在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer)。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!