• 技术文章 >web前端 >前端问答

    jquery怎么给select增加选项

    青灯夜游青灯夜游2022-05-30 12:01:32原创141

    两种方法:1、用“$("select").append("<option>选项内容</option>");”语句追加新选项;2、用“$("select").prepend("<option>选项内容</option>");”在开头添加选项。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    select 元素可创建单选或多选菜单。select元素中的 option标签用于定义列表中的可用选项。

    <select>
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

    1.png

    因此,给select增加选项,就是给在select标签中添加option子元素标签。

    jquery给select增加选项(option子元素)可以用以下两种方法:

    1、append()方法

    append( ) 方法向所选元素内部的“末尾处”插入内容。

    $(A).append(B)

    实现示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-1.10.2.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("button").click(function() {
    					var $op = "<option value ='新选项'>新选项</option>";
    					$("select").append($op);
    				});
    			});
    		</script>
    	</head>
    
    	<body class="ancestors">
    		<select>
    		  <option value ="volvo">Volvo</option>
    		  <option value ="saab">Saab</option>
    		  <option value="opel">Opel</option>
    		  <option value="audi">Audi</option>
    		</select><br><br>
    		<button>给select增加选项</button>
    	</body>
    
    </html>

    1.gif

    2、prepend( ) 方法

    prepend( ) 方法可以向所选元素内部的“开始处”插入内容。

    $(A).prepend(B)

    实现示例:

    <script>
    	$(document).ready(function() {
    		$("button").click(function() {
    			var $op = "<option value ='新选项'>新选项</option>";
    			$("select").prepend($op);
    		});
    	});
    </script>

    2.gif

    【推荐学习:jQuery视频教程web前端开发

    以上就是jquery怎么给select增加选项的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery使用的是什么协议 下一篇:jquery是基于js吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• jquery语法结构由哪几部分组成• jquery怎么隐藏第一个a标签• jquery怎么设置元素的位置• jquery怎么删除除表头外的其他行• jquery怎么根据id移除元素• 怎么用jquery实现下拉菜单• jquery怎么设置第一行不清空
    1/1

    PHP中文网