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. Linux 下编译安装xCache命令速记

    注意要先确保/path-to-php/bin/php-config存在下载链接: http://pan.baidu.com/s/1hqh5pDM #解压xcache源代码tar -zvxf xcach ...

  2. HDU 4349 Xiao Ming's Hope [Lucas定理 二进制]

    这种题面真是够了......@小明 题意:the number of odd numbers of C(n,0),C(n,1),C(n,2)...C(n,n). 奇数...就是mod 2=1啊 用Lu ...

  3. django-rest-framework快速入门

    前言:第一次接触django-rest-framework是在实习的时候.当时也不懂,看到视图用类方法写的感觉很牛逼的样子.因为官网是英文的,这对我的学习还是有一点的阻力的,所以当时也没怎么学.真是太 ...

  4. 自动化测试selenium(三) 由于iframe 定位不到元素

    iframe原因定位不到元素 现在的项目后台基本都是上左右结构,要出现这个结构效果,需要使用到了iframe标签: 我们先说说iframe在java中使用的方法: driver.switchTo(). ...

  5. linux下统计某个进程的CPU占用和内存使用

    为了测试是否有内存泄露,写了一个监控脚本,统计这个进程的cpu和内存 主要用了 ps aux命令, 很简单,不多解释了,上脚本 #!/bin/bash # while loop CpuMemStat= ...

  6. 阿里云学习之IOT物联网套件（客户端与服务端的后台数据传输）

    设备端代码(mqttClient):https://help.aliyun.com/document_detail/42648.html?spm=5176.doc30579.6.569.ZEgA1g ...

  7. JSP基础使用

    一.JSP简介 JSP(Java Sever Pages):是为了能让 Java 在 Web 页面运行的一种语言. 在JSP中包括两种主要内容: 1. HTML.JS语言(静态内容).由客户端浏览器负 ...

  8. Hive入门教程

    Hive 安装 相比起很多教程先介绍概念,我喜欢先动手装上,然后用例子来介绍概念.我们先来安装一下Hive 先确认是否已经安装了对应的yum源,如果没有照这个教程里面写的安装cdh的yum源http: ...

  9. Redis缓存 序列化对象存储乱码问题

    使用Redis缓存对象会出现下图现象: 键值对都是乱码形式. 解决以上问题: 如果是xml配置的 我们直接注入官方给定的keySerializer,valueSerializer,hashKeySer ...

  10. Java经典编程题50道之四十四

    求0~7所能组成的奇数个数.分析:组成1位数是4个,组成2位数是7*4个,组成3位数是7*8*4个,组成4位数是7*8*8*4个…… public class Example44 {    publi ...