用jquery或js获取select标签中选中的option值及文本

喜欢ヅ旅行 2021-11-10 14:20 1179阅读 0赞

**本文目录**

一、示例

二、获取option的文本

三、获取option中value的值

四、代码展示

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

# 一、示例 #

# 二、获取option的文本 #

> **// 方法一：获取select标签选中的option中的文本。**  
> **$("\#selectedTest option:selected").text()  **    \--------->  例如北京、上海
> 
> **// 方法二：获取select标签选中的option中的文本。**  
> **$("\#selectedTest").find("option:selected").text()  **    \--------->  例如北京、上海

> **// 获取select标签选中的option中的文本。**  
> **document.querySelector('\#selectedTest option:checked').text;**
> 
> **// 将北京这个文本值赋值给option中的文本，通常用于回显数据操作。**  
> **document.querySelector('\#selectedTest').value = '北京';**

# 三、获取option中value的值 #

> **// 方法一：获取select标签选中的option中的value的值。**  
> **$("\#selectedTest option:selected").val()  **             \--------->  例如abc、edf
> 
> **// 方法二：获取select标签选中的option中的value的值。**  
> **$("\#selectedTest").find("option:selected").val()**               \--------->  例如abc、edf

\------------------------------有重点,分割线--------------------------------

> option是这样的：
> 
> <option>上海</option>，这个没有value属性，那么自然也就没有value值。
> 
> 这时候jquery就很纠结：写了段代码让我拿value的值，可是找到的option中根本没有value属性。
> 
> 这个时候Jquery的操作是：当选中<option>上海</option>这种格式的时候，你会发现上边四个在控制台打印输出来的值是
> 
> 一样的。都是option中的文本。**所以想要拿到option中的value的值，首先option得有value属性啊！！！**

# 四、代码展示 #

下面就是HTML代码，看着可以更清楚：

<!DOCTYPE html>
    <html>
    	<head>
    	    <meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<title>你随便写啦</title>
    		<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    		<script type="text/javascript">
    			function doSomething(){
    				console.info($("#selectedTest option:selected").text());//方法一：获取select标签选中的option中的文本。
    				console.info($("#selectedTest").find("option:selected").text());//方法二：获取select标签选中的option中的文本。
    				
    				console.info($("#selectedTest option:selected").val());//方法一：获取select标签选中的option中的value的值。
    				console.info($("#selectedTest").find("option:selected").val());//方法二：获取select标签选中的option中的value的值。
    				
    				document.querySelector('#selectedTest option:checked').text; // 获取select标签选中的option中的文本。
    				document.querySelector('#selectedTest').value = '北京'; // 将北京这个文本值赋值给option中的文本，通常用于回显数据操作。
    				//------------------------------有重点,分割线--------------------------------
    				
    				//option是这样的：<option>上海</option>。即没有value属性的时候，自然也就没有value值。
    				//这时候jquery就很纠结：写了段代码让我拿value的值，可是找到的option中根本没有value属性。
    				//所以当选中<option>上海</option>这个option的时候，你会发现上边四个在控制台打印输出来的值是一样的。都是option中的文本。
    				//想要拿到option中的value的值，首先option得有value属性啊！！！
    			}
    		</script>
    	</head>
    	
    	<body>
    		<div>
    			<select id="selectedTest" οnchange="doSomething();">
    				<option value="abc">城市</option>
    				<option value="edf">北京</option>
    				<option>上海</option>
    			</select>
    		</div>
    	</body>
    </html>

完结！