html里如何获取每次点击select里的option值？

最新推荐文章于 2020-11-24 15:44:01 发布

fujunyan_07

最新推荐文章于 2020-11-24 15:44:01 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js html 文章标签： html jquery option select javascript

本文链接：https://blog.youkuaiyun.com/guizi_07/article/details/44495131

前端同时被 3 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

本文介绍了一种在HTML中通过JavaScript获取下拉列表框中选中Option元素值的方法。利用jQuery简化了对DOM的操作，当Select元素发生改变时，会触发事件并弹窗显示被选中的Option文本。

不知道大家有没有遇到过要获取当前选中的option值的情况，大家有爱自取哈～

我们在用到下拉列表框select时，需要对选中的<option>选项触发事件，其实<option>本身没有触发事件方法，我们只有在select里的 onchange方法里触发。

--------------------------------------------------------源代码--------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<select id="pid" onchange="gradeChange()">

    <option value="北京">北京</option>

    <option value="上海">上海</option>
</select>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    function gradeChange(){
        var checkText=$("#pid").find("option:selected").text();
        alert(checkText);
    }
</script>
</body>
</html>