删除及修改select

更多关于jQuery相关内容感兴趣的读者可查看本站专题,jQuery,本文实例讲述了JavaScript实现向select下拉框中添加和删除元素的方法,b. 利用

正文实例呈报了jQuery扩充、删除及修改select
option的秘籍。分享给我们供我们参照他事他说加以考察,具体如下:

本文实例汇报了JavaScript完结向select下拉框中丰盛和删除成分的方法。分享给大家供大家仿效,具体如下:

jQuery获取Select选择的Text和Value:

1、说明

1.

a. 利用append()主意向下拉框中添港成分

//获取Select选择的Text
var checkText=jQuery("#select_id").find("option:selected").text(); 

b. 利用remove()艺术移除下拉框中最终一个要素

2.

2、实例源码:

//获取Select选择的option Value
var checkValue=jQuery("#select_id").val();
<!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.

3、达成结果

//获取Select选择的索引值
var checkIndex=jQuery("#select_id ").get(0).selectedIndex;

(1)伊始化时

4.

图片 1 

//获取Select最大的索引值
var maxIndex=jQuery("#select_id option:last").attr("index");

(2)添英镑素

jQuery添加/删除Select的Option项:

 图片 2

1.

(3)删除成分

//为Select追加一个Option(下拉项)
jQuery("#select_id").append("<option value='Value'>Text</option>");

 图片 3

2.

越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery表单(form)操作本事计算》、《jQuery窗口操作技巧总结》、《jQuery拖拽特效与能力计算》、《jQuery常用插件及用法总计》、《jquery中Ajax用法总括》、《jQuery表格(table)操作技术汇总》、《jQuery扩大才能总括》、《jQuery常见非凡特效汇总》、《jQuery动画与特效率法计算》及《jquery选用器用法总括》

//为Select插入一个Option(第一个位置)
jQuery("#select_id").prepend("<option value='0'>请选择</option>");

瞩望本文所述对大家jQuery程序设计具有扶助。

3.

您恐怕感兴趣的小说:

  • js完结Select下拉框具备输入成效的点子
  • JS操作select下拉框动态变动(创立/删除/获取)
  • JavaScript兑现将数组数据增进到Select下拉框的不二等秘书籍
  • Javascript
    select下拉框操作常用方法
  • JS
    Select下拉框(辅助输入模糊查询)
  • javascript中select下拉框的用法总计
  • JavaScript贯彻七个select下拉框选项左移右移
  • js达成可输入可选取的select下拉框
  • jquery及原生js获取select下拉框选中的值示例
  • JavaScript贯彻获取select下拉框中首先个值的点子
//删除Select中索引值最大Option(最后一个)
jQuery("#select_id option:last").remove();

4.

//删除Select中索引值为0的Option(第一个)
jQuery("#select_id option[index='0']").remove();

5.

//删除Select中Value='3'的Option
jQuery("#select_id option[value='3']").remove();

6.

//删除Select中Text='4'的Option
jQuery("#select_id option[text='4']").remove();

内容清空:

jQuery("#select_id").empty();

更加的多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery
form操作手艺汇总》、《jQuery切换特效与本事总计》、《jQuery拖拽特效与技术计算》、《jQuery扩大技艺总括》、《jQuery常见杰出特效汇总》、《jQuery动画与特功用法总结》、《jquery选取器用法总括》及《jQuery常用插件及用法总括》

仰望本文所述对大家jQuery程序设计具备补助。

你也许感兴趣的稿子:

  • jQuery依据成分值删除数组成分的格局
  • jquery操作对象数组成分方法详解
  • jQuery教程
    $()包装函数来落到实处数组成分分页效果
  • jquery
    动态扩张删除行的简要实例(推荐)
  • jquery删除table当前行的实例代码
  • jQuery删除节点用法示例(remove方法)
  • jq实现左滑显示删除按键,点击删除实现删除数据功效(推荐)
  • jQuery
    获取页面li数组并删除不在数组中的key
  • 传闻jQuery完毕表格的查看修改删除
  • jQuery完成表格行和列的动态拉长与删除方法【测验可用】
  • jquery删除数组中另行元素