jQuery下拉框元素操作

忘是亡心i 2023-10-06 09:13 18阅读 0赞

对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>

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery下拉框元素操作

对select下拉中元素的操作：增、删、清空 <!DOCTYPE html> <html> <head> <meta charset="

忘是亡心i/ 2023年10月06日 09:13/ 0 赞/ 19 阅读

相关 JQuery---下拉选择框初始化

<html> <head>  <link href="https://cdn.static

绝地灬酷狼/ 2023年06月21日 08:49/ 0 赞/ 22 阅读

相关 jquery操作select 下拉列表

(注意：此处用的是jquery1.4.1) var index = $('\ddlBrand option:selected').attr('index');//获取选中项的

港控/mmm°/ 2022年09月29日 15:56/ 0 赞/ 231 阅读

相关 jquery操作下拉框select

Jquery操作select标签选中、更改选中、清空、删除和增加： <html xmlns="http://www.w3.org/1999/xhtml"> <

╰半橙微兮°/ 2022年09月22日 11:38/ 0 赞/ 309 阅读

相关【JQuery】——级联下拉框效果

【html】 <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-

柔情只为你懂/ 2022年07月14日 01:37/ 0 赞/ 300 阅读

相关 JQuery之简单下拉框

今天介绍的主题是如何用JQuery实现下拉框，话不多说，贴代码！ <!DOCTYPE html> <html> <script type="text/

本是古典何须时尚/ 2022年06月10日 12:11/ 0 赞/ 159 阅读

相关 jQuery 自定义下拉列表框

在上一篇《[单选框/复选框美化][Link 1]》中，使用到了关键先生 <label>，但是很不幸运，在下拉列表框(<select>)中，<label>并不能通过指向来展开选项

深碍√TFBOYSˉ_/ 2022年05月09日 12:03/ 0 赞/ 295 阅读

相关 Jquery学习笔记：操作form表单元素之一（文本框和下拉框）

一、概述在web页面开发中，经常需要获取和设置表单元素的值（如文本框中的内容），特别是在ajax应用中，更是常态。本文系统的介绍下如何操作。同操作其它html元素一样，

今天药忘吃喽~/ 2022年03月30日 04:56/ 0 赞/ 283 阅读

相关 jquery简单多选下拉框

<!DOCTYPE html> <html> <head> <title></title> <meta charset=

傷城~/ 2022年03月18日 08:24/ 0 赞/ 414 阅读

相关下拉框联动jquery\js例子

下拉框联动jquery\\js例子具体代码如下： $(window).load(function () { // 父级下拉框修改时，根据

小咪咪/ 2021年12月11日 08:45/ 0 赞/ 375 阅读