📌  相关文章
📜  jquery 获取选定的选项值 - Javascript (1)

📅  最后修改于: 2023-12-03 15:02:15.901000             🧑  作者: Mango

jQuery 获取选定的选项值 - Javascript

在Web开发中，我们经常需要从下拉列表中获取用户选择的选项值，并在后续的操作中使用。jQuery是一个流行的JavaScript库，提供了方便的方法来获取这些选项值。

使用.val()方法获取选项值

jQuery的.val()方法可以用来获取表单元素的值，包括下拉列表的选中值。使用该方法获取下拉列表的选中值只需要传入选择器即可。

var selectedValue = $('#my-select').val();

以上代码获取了id为'my-select'的下拉列表选中值，并将其赋值给变量'selectedValue'。

使用:selected选择器获取选项值

如果我们要获取下拉列表中某一特定选项的值，也可以使用:selected选择器来获取。

var selectedValue = $('#my-select option:selected').val();

以上代码获取了id为'my-select'下选中的选项值，并将其赋值给变量'selectedValue'。

示例代码

下面是完整的示例代码，演示了如何获取下拉列表选中值并在控制台中输出。

<!DOCTYPE html>
<html>
<head>
	<title>jQuery获取下拉列表选中值</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<select id="my-select">
		<option value="1">选项1</option>
		<option value="2">选项2</option>
		<option value="3">选项3</option>
	</select>
	<button id="my-button">获取选中值</button>
	<script>
		$('#my-button').click(function() {
			var selectedValue = $('#my-select').val();
			console.log(selectedValue);
		});
	</script>
</body>
</html>

在该代码中，我们通过click事件监听按钮的点击，并在回调函数中使用.val()方法获取下拉列表的选中值，并通过console.log()方法将其输出到控制台中。