作为前端小白，继续记录自己的成长点滴...

先上效果图吧，虽然丑了点

先上代码:

<!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/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>

下面是关键代码：

  1.             <option value="目的地">目的地</option>
  2.             $('#cont select').change(() => {
  3.                 console.log($('#cont select').val());

老样子总结下就是

1.让select下的option选项内容值与value值相对应

2.利用jquery自带的监听函数change()即在select选择框值改变时触发函数

3.通过.val()获取其内容，当然还有一种方式就是代码中被我注释掉的: $('#cont select option:selected').text()两种方式皆可。

 

更多推荐

jquery实时监听选择框select内容变化