JavaScript向select下拉框中添加和删除元素



1、说明

a   利用append()方法向下拉框中添加元素

b   利用remove()方法移除下拉框中最后一个元素



2、设计源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript向select下拉框中添加和删除元素</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
      /**
	   * 向select下拉框中添加子元素
	   */
     function addElement()
	 {
	     //保证不重复添加
	     $("#select_div").empty();
		 //添加子元素
		 $("#select_div").append("<option value='0'>---请选择---</option><option value='1'>男</option><option value='2'>女</option>");
	 }

	 /**
	  * 删除下拉框中最后一个元素
	  */
	 function removeLast()
	 {
		 //删除最后一个子元素
		 $("#select_div option:last").remove();
	 }
</script>
</head>

<body>
</body>
    <div id="select_span">
         <select id="select_div" style="width:145px;">

         </select>
    </div>
    <input type="button" value="添加元素" onclick="addElement()"/>
    <input type="button" value="删除元素" onclick="removeLast()"/>
</html>

3、实现结果

（1）初始化时





（2）添加元素





（3）删除元素



JavaScript向select下拉框中添加和删除元素的更多相关文章

  1. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  2. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  3. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  5. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  6. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  7. python+webdriver,选取Select下拉框中的值

    在选择下拉框中的值时遇到了困难,用driver.find_element_by_id("").send_keys("")进行赋值不能成功获取下拉框中的值.   ...

  8. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  9. js获取select下拉框中的值

    现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...

随机推荐

  1. Redis服务启动失败，提示：redis-server：command not found

    今天我开始做主从复制的集群模式的测试,所以需要再装一个Linux操作系统,我在虚拟机里已经安装了一个Linux操作系统,Redis也已经配置好了.今天打算再安装一个Linux操作系统,Linux系统的 ...

  2. IDEA Tomcat：Failed to initialize end point associated with ProtocolHandler

    发现Tomcat的日志中出现这样的错误,一般都是端口被占用了.在任务管理器中检查是否有其他的应用在使用该端口 Failed to initialize end point associated wit ...

  3. 读Ghost博客源码与自定义Ghost博客主题

    我使用的Ghost博客一直使用者默认的Casper主题.我向来没怎么打理过自己博客,一方面认为自己不够专业,很难写出质量比较高的文字:另一方面认为博客太耗时间,很容易影响正常的工作内容.最近公司即将搬 ...

  4. Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals)

    Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) 说一点东西: 昨天晚上$9:05$开始太不好了,我在学校学校$9:40$放 ...

  5. POJ1741Tree [点分治]【学习笔记】

    Tree Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 20098   Accepted: 6608 Description ...

  6. adb模拟操作之event

    首语: 我们都知道,adb可以对模拟器和root过的真机进行很多操作,例如:模拟点击,输入,截图,手机和PC,数据互传等.这篇要说的就是adb操作模拟器或者真机的输入输出. 0x01 问题 使用adb ...

  7. 安装Spring Tool Suite（STS）

    JAVA开发工具中,常用工具就是Eclipse,IntelliJ IDEA. 现在使用spring boot&cloud框架进行开发的时候,虽然可以使用上面两个工具,但都未必就真的量身定制,I ...

  8. Visual Studio 2017 Enterprise （15.3）

    版本15.3更新在用户离线下载时更加人性化,包含了进度显示,下载出错可以输入R,进行下载的重新尝试,并在当前下载框下继续下载为完成的作业,结合 --layout 参数的离线文件的检查和修复,并且在下载 ...

  9. 【Tools】ubuntu16.04安装搜狗输入法

    Ubuntu16,04 安装搜狗输入法 1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/ 2.按键Ctr+Alt+T打开终端,输入以下命令切换到下载 ...

  10. ubuntu 双网卡建网桥脚本实现

    #!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...