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. thinkPHP 模板的使用技巧（十三）

    原文:thinkPHP 模板的使用技巧(十三) 模板的使用技巧:页面跳转 .模板包含.模板渲染.模板的继承 页面跳转 <a href='__URL__/index'>我要跳转到首页面,用这 ...

  2. ORACLE常用数据库类型(转)

    oracle常用数据类型 1.Char 定长格式字符串,在数据库中存储时不足位数填补空格,它的声明方式如下CHAR(L),L为字符串长度,缺省为1,作为变量最大32767个字符,作为数据存储在ORAC ...

  3. 18.如何自我Struts2它Struts2标签和综合汇总文章有点早

    18.如何自我Struts2它Struts2标签和综合汇总文章有点早[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了.仅仅好传到百度云上: h ...

  4. java特权制度设计篇

    数据库表设计 1.1.1.   模块管理(jk_module) 项 类型 说明 id long 就是数据库记录idx号 name string 模块名称 orderid int 排序id  由小到大显 ...

  5. 如何高效地向Redis插入大量的数据（转）

    最近有个哥们在群里问,有一个日志,里面存的是IP地址(一行一个),如何将这些IP快速导入到Redis中. 我刚开始的建议是Shell+redis客户端. 今天,查看Redis官档,发现文档的首页部分( ...

  6. 8月30号周五香港接单ING~~化妆品只加10元!!!!!!

    8月30号周五香港接单ING~~化妆品只加10元!!!!!! 8月30号周五香港接单ING~~化妆品只加10元!!!!!!

  7. 1-5html文件基本结构

    认识html文件基本结构 1)这一节中我们来学习html文件的结构:一个HTML文件是有自己固定的结构的. <html> <head>...</head> < ...

  8. cocos2D（四）---- CCSprite

    在介绍CCSprite之前,先要理解游戏开发中的一个核心概念:精灵.精灵也称为游戏对象,它能够用来表示游戏中的不论什么物体,比方敌人.子弹.甚至是一个背景图片.一段文字.CCSprite能够说是在co ...

  9. iPhone、iPad强制关机

    情景:iPad測试应用过程中死机了. 解决:同一时候按住右上方的电源键和屏幕下方的HOME键大约10秒左右. 就会自己主动强制断电关机,然后重新启动. 强制重新启动后你会看到进入苹果的标志,然后进入主 ...

  10. SendMessage发送自定义消息及消息响应

    控件向父窗体发送自定义消息,父窗体定义处理此消息的函数   效果描述: 指定哪个类添加自定义消息:(当然这个类必须是CmdTarget的子类,不然不能处理消息) 添加消息 实现消息函数:(wParam ...