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 相关文章推荐
window resize和scroll事件的基本优化思路
Apr 29 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
Javascript之Math对象详解
Jun 07 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
react实现复选框全选和反选组件效果
Aug 25 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
杏林同学录(八)
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
初识Javascript小结
2015/07/16 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
JS实现星星海特效
2019/12/24 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python实现二维数组输出为图片
2018/04/03 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
信用社主任竞聘演讲稿
2014/05/23 职场文书
地震捐款倡议书
2014/08/29 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
仲裁协议书
2014/09/26 职场文书
找规律教学反思
2016/02/23 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
基于flask实现五子棋小游戏
2021/05/25 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫