Home >Web Front-end >Front-end Q&A >How to hide option in jquery

How to hide option in jquery

青灯夜游
青灯夜游Original
2022-09-27 17:21:222064browse

Implementation steps: 1. Obtain the specified option element through the id attribute value. The syntax "$("#id value")" will return a jquery object containing the specified option element; 2. Use hide(), fadeOut() or slideUp() to hide the specified element, the syntax is "element object.hide();" or "element object.fadeOut();" or "element object.slideUp();".

How to hide option in jquery

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

option element

The option element defines an option (an entry) in a drop-down list.

The browser displays the content in the

The option element is located inside the select element.

<select>
	<option value="目的地">目的地</option>
	<option value="温州">温州</option>
	<option value="永嘉">永嘉</option>
	<option value="北京">北京</option>
</select>

How to hide option in jquery

An option in the drop-down list is an option element.

How to use jquery to hide option?

Implementation steps

Step 1: Get the specified option element through the id attribute value

$("#id值")

Will return a jquery object containing the specified option element

2. To hide the obtained element object

You can use hide(), fadeOut() or slideUp() Function to hide the specified element

$(selector).hide(speed,easing,callback)

$(selector).fadeOut(speed,easing,callback)

$(selector).slideUp(speed,easing,callback)

Example: Hide the specified option element

  • hide() implementation

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		</style>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("#start").hide();
				});
			});
		</script>
	</head>
	<body>
		<select size="4">
			<option value="目的地">目的地</option>
			<option value="温州">温州</option>
			<option id="start" value="永嘉">永嘉--需要隐藏</option>
			<option value="北京">北京</option>
		</select>
		<button>隐藏内容为“永嘉”的option元素</button>
	</body>
</html>

How to hide option in jquery

  • ##fadeOut() implementation

  • $(document).ready(function() {
    	$("button").click(function() {
    		$("#start").fadeOut();
    	});
    });

How to hide option in jquery

  • slideUp() implementation

  • $(document).ready(function() {
    	$("button").click(function() {
    		$("#start").slideUp();
    	});
    });

How to hide option in jquery

[Recommended learning:

jQuery video tutorial, web front-end video

The above is the detailed content of How to hide option in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:what are jquery pluginsNext article:what are jquery plugins