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. C++ STL copy函数效率分析

    在C++编程中,经常会配到数据的拷贝,如数组之间元素的拷贝,一般的人可能都会用for循环逐个元素进行拷贝,在数据量不大的情况下还可以,如果数据量比较大,那么效率会比较地下.而STL中就提供了一个专门用 ...

  2. nodejs启动守护程序pm2

    nodejs启动守护程序pm2 by 伍雪颖 做了个应用,server放阿里云,只是server总会自己断,后来写了个心跳程序,就是检測应用线程是否还在,不在就再启动, 这种方法好笨重啊,后来发现no ...

  3. MySQL的Master/Slave群集安装和配置

    本文介绍MySQL的Master/Slave群集安装和配置,版本号安装最新的稳定版GA 5.6.19. 为了支持有限HA.我们用Master/Slave读写简单孤立的集群.有限HA这是当Master不 ...

  4. 我经历的IT公司面试及离职感受（转）

    毕业后几年一直待在广州,觉得这是一个比较生活化及务实的城市,其互联网公司和相应的投融资环境都不如北深上活跃,大大小小的面试也有几十个,有点规模的公司应该都面试过了,面试一般会见到主力技术人员,技术主管 ...

  5. 欧舒丹 L'Occitane 活力清泉保湿面霜 - 男士护肤 - 香港草莓网StrawberryNET.com

    欧舒丹 L'Occitane 活力清泉保湿面霜 - 男士护肤 - 香港草莓网StrawberryNET.com 欧舒丹 活力清泉保湿面霜 50ml/1.7oz

  6. 【iOS开发-71】解决方式：Attempting to badge the application icon but haven&#39;t received permission from the...

    (1)原因 一切都是iOS8捣的鬼.您假设把模拟器换成iOS7.1或者更早的,就不会有这个问题.而如今在iOS8中要实现badge.alert和sound等都需要用户允许才干,由于这些都算做Notif ...

  7. 《Qt编程的艺术》——9.1 QtSql模块的结构

    QtSql是一个独立的库,如果需要的话,它可以加载附加的插件.不同于QtCore和QtGui,它的内容默认情况下并没有整合进生成的project中.要使用这个库,我们要编辑 .pro文件,添加下列条目 ...

  8. vim php代码规范

    vim 代码规范工具php-cs-fixer.phar (參考https://github.com/FriendsOfPHP/PHP-CS-Fixer) INSTALL curl http://get ...

  9. hdu2612（bfs）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2612 题意:求2个点到任意一个KFC的距离之和,使其最小. 分析:由两个点出发分别两次bfs,求得到每 ...

  10. Python-Tkinter的Entry详解

    #Tkinter教程之Entry篇 #Entry用来输入单行文本 '''1.第一个Entry程序''' from Tkinter import * root = Tk() Entry(root,tex ...