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

本文目录

一、示例

二、获取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是这样的：

上海，这个没有value属性，那么自然也就没有value值。

这时候jquery就很纠结：写了段代码让我拿value的值，可是找到的option中根本没有value属性。

这个时候Jquery的操作是：当选中上海这种格式的时候，你会发现上边四个在控制台打印输出来的值是

一样的。都是option中的文本。所以想要拿到option中的value的值，首先option得有value属性啊！！！

四、代码展示

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

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

			
				城市
				北京
				上海
			
		
	

完结！

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net