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. Community Stories: Cinemachine and Timeline——Community Stories: Cinemachine and Timeline

    Community Stories: Cinemachine and Timeline 社区故事:Cinemachine 和 Timeline Adam Myhill, 八月 25, 2017 原文: ...

  2. Django(三) ORM操作

    一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 ORM:关系对象映射.定义一个类自动生成数据库的表结构. 数据库常用的数据类型 : 数字 字符串 时间 ORM分为两种类型: 主流都是 ...

  3. bzoj 4827: [Hnoi2017]礼物 [fft]

    4827: [Hnoi2017]礼物 题意:略 以前做的了 化一化式子就是一个卷积和一些常数项 我记着确定调整值还要求一下导... #include <iostream> #include ...

  4. BZOJ 3262: 陌上花开 [CDQ分治 三维偏序]

    Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当 ...

  5. 【转】如何解决plsql查询oracle数据库语句where条件带有中文无法匹配结果

    一.问题描述 之前使用PLSQL查询oracle数据库可以正常查询统计结果,由于换了个电脑,重新安装之后,同样的sql查询语句同一个数据库,无法正常查询结果,如下图所示 二.解决办法 1. 查询数据当 ...

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

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

  7. python+opencv2相机位姿估计

    最近在做基于图像的室内定位方面的研究,于是使用到了百度最新的室内数据库Image-based Localization (IBL) .由于该数据库给出的数据是每幅图像和其对应相机的内外参数和光心投影方 ...

  8. LeetCode - 627. Swap Salary

    Given a table salary, such as the one below, that has m=male and f=female values. Swap all f and m v ...

  9. Maven编译问题

    Maven构建的Project默认使用JDK1.5进行编译,要想使用JDK1.8进行编译,最好在项目的POM文件中加上以下的字段. <build> <plugins> < ...

  10. PHPStorm 常用 设置配置 和快捷键大全 Win/Mac

    [转自 http://blog.csdn.net/fenglailea/article/details/53350080] PHPStorm 下载及主题样式下载 http://www.lanmps.c ...