Maison > interface Web > js tutoriel > le corps du texte

Comment obtenir la valeur de l'option dans la balise select dans jquery

亚连
Libérer: 2018-06-09 14:32:34
original
4396 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple d'utilisation de jquery pour obtenir la valeur de l'option et le texte sélectionné dans la balise select. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

1. Si vous souhaitez utiliser jquery, vous devez d'abord introduire le fichier jquery en html ou jsp.

2. Sans plus tarder, entrons dans le code.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script type="text/javascript" src="../../../../js/common/jquery-1.6.2.js"></script>
		<script type="text/javascript">
			function doSome(){
				alert($("#sel option:selected").text());//方法一:获取select标签选中的option中的文本。
				alert($("#sel").find("option:selected").text());//方法二:获取select标签选中的option中的文本。
				
				alert($("#sel option:selected").val());//方法一:获取select标签选中的option中的value的值。
				alert($("#sel").find("option:selected").val());//方法二:获取select标签选中的option中的value的值。
				//------------------------------帅气的分割线,,下面有重点--------------------------------
				
				//当option是这样的:<option>cc</option>。即没有value属性的时候。自然也就没有value值。
				//这时候jquery就很纠结:写了段代码让我拿value的值,可是找到的option中根本没有value属性。
				//算了,把option中 的文本拿出来给你吧。
				//所以当选中<option>cc</option>这个option的时候,你会发现上边四个alert出来的值是一样的。都是option中的文本。
				//想要拿到option中的value的值,首先option得有value属性啊!!!
			}
		</script>
	</head>
	
	<body>
		<p>
			<select id="sel" onchange="doSome();">
				<option value="aa">bb</option>
				<option>cc</option>
			</select>
		</p>
	</body>
</html>
Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Expliquez l'objet Object en détail dans JS

Comment utiliser vue.js pour réaliser que le pop- up box ne joue qu'une seule fois

Interprétation détaillée de l'arbre de préfixes trie en javascript

Interprétation détaillée du code todoMVC dans Vue

Dans Comment ajouter et obtenir dynamiquement le nom du style dans jquery

Comment implémenter la communication entre composants parent-enfant dans Angular2

Comment créer une logistique dans D3.js Map (tutoriel détaillé)

Composant NavigatorIOS dans React Native (description détaillée du tutoriel)

À propos comment utiliser le modèle ejsExcel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!