jQuery下拉框元素操作

对select下拉中元素的操作:增、删、清空

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function add() {
				$("#sele").append("<option value='sz1005'>新增1005</option>");
			}

			function remo() {
				$("#sele option[value='sj1002']").remove();
				$("#sele option[value='sj1003']").remove();
			}

			function seleremo() {
				$("select option:selected").remove();
			}

			function clearEmpty() {
				$("#sele").empty();
			}
		</script>
	</head>

	<body>
		<pre>
			jQuery 对下拉框的操作,增删节点,删除指定节点,清空
		</pre>
		<select name="" id="sele" size="7">
			<option value="sj1001">数据1001</option>
			<option value="sj1002">数据1002</option>
			<option value="sj1003">数据1003</option>
		</select>

		<br />
		<input type="button" onclick="add()" value="添加节点" /><br />
		<input type="button" onclick="remo()" value="移除节点" /><br />
		<input type="button" onclick="seleremo()" value="选中移除" /><br />
		<input type="button" onclick="clearEmpty()" value="清空" /><br />
	</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_36521848/article/details/106245983