jquery实时监听选择框select内容变化
作为前端小白,继续记录自己的成长点滴...先上效果图吧,虽然丑了点先上代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scala...
·
作为前端小白,继续记录自己的成长点滴...
先上效果图吧,虽然丑了点
先上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>用户中心</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="cont">
<select>
<option value="目的地">目的地</option>
<option value="温州">温州</option>
<option value="永嘉">永嘉</option>
</select>
</div>
<script>
$(() => {
$('#cont select').change(() => {
// console.log('change');
// console.log($('#cont select option:selected').text());
console.log($('#cont select').val());
});
});
</script>
</body>
</html>
下面是关键代码:
- <option value="目的地">目的地</option>
- $('#cont select').change(() => {
- console.log($('#cont select').val());
老样子总结下就是
1.让select下的option选项内容值与value值相对应
2.利用jquery自带的监听函数change()即在select选择框值改变时触发函数
3.通过.val()获取其内容,当然还有一种方式就是代码中被我注释掉的: $('#cont select option:selected').text()两种方式皆可。
更多推荐
已为社区贡献2条内容
所有评论(0)