JavaScript实现向select下拉框中添加和删除元素的方法


Posted in Javascript onMarch 07, 2017

本文实例讲述了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.7.2.min.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下拉框中添加和删除元素的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
React Native项目框架搭建的一些心得体会
May 28 Javascript
js仿网易表单及时验证功能
Mar 07 #Javascript
JS完成画圆圈的小球
Mar 07 #Javascript
jQuery Chosen通用初始化
Mar 07 #Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 #Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
You might like
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php实现mysql封装类示例
2014/05/07 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
python计算auc指标实例
2017/07/13 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
Python内置异常类型全面汇总
2020/05/28 Python
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
超市周年庆活动方案
2014/08/16 职场文书
服务行业标语口号
2015/12/26 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android