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

时间：2023-01-07 22:48:17

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）初始化时

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



（2）添加元素

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



（3）删除元素

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

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

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

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

  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&plus;webdriver&comma;选取Select下拉框中的值

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

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

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

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

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

随机推荐

  1. Java &lbrack;Leetcode 231&rsqb;Power of Two

    题目描述: Given an integer, write a function to determine if it is a power of two. 解题思路: 判断方法主要依据2的N次幂的特 ...

  2. Mysql线程池优化笔记

    Mysql线程池优化我是总结了一个站长的3篇文章了,这里我整理到一起来本文章就分为三个优化段了,下面一起来看看.     Mysql线程池系列一(Thread pool FAQ) 首先介绍什么是mys ...

  3. 查看linux虚拟机ssh服务是否开启

    知识准备: 1.ssh和sshd的区别: 2.ssh服务进程默认地址:/etc/init.d/ssh 查看ssh服务是否开启 service ssh status 或者: /etc/init.d/ss ...

  4. PHP面向对象的特性

    1.抽象性2.封装性3.继承extends4.多态

  5. 新建aix实例

    http://www.cnblogs.com/kfarvid/archive/2010/12/21/1912553.html   DB2数据库 http://wenku.baidu.com/view/ ...

  6. ASP&period;NET Core 从 gitlab-ci 环境变量读取配置

    最近在加强持续集成,遇到一个场景需要通过 gitlab-ci 环境变量(Settings -> Settings -> CI/CD -> Variables )在持续集成时向 ASP ...

  7. Debian9安装桌面环境

    更新安装源 apt-get update 安装 x-window apt-get install x-window-system-core 安装 gnomeapt-get install gnome- ...

  8. 【memcached的常用操作】

    memcache是一个KEY-VALUE存储缓存数据库,常用作网站数据请求的存储; 提供多种API: 语法简单类似于redis; #设置一个键值存储 #添加一个键值存储 #获取键值 #删除键值 #清空 ...

  9. 初涉springboot&lpar;二&rpar;

    概述 1.环境说明 2.HelloWorld项目细节   3.小结 一. 关于环境补充 在上一篇的HellWorld项目中,我们构建SpringBoot项目,采用的是jdk1.8版本,springbo ...

  10. 变量声明和定义的关系------c&plus;&plus; primer

    为了允许把程序分成多个逻辑部分来编写,c++语言支持分离式编译机制 为了支持分离式编译,c++语言把声明和定义区分开来.声明(declaration)使得名字为程序所知,一个文件如果想使用别处定义的名 ...

相关文章