jquery/js中select option操作总结

1、获取选中select的value和text,html代码如下:

 代码如下 复制代码

<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

jquery select操作

 代码如下 复制代码

$("#mySelect").val(); //获取选中记录的value值
$("#mySelect option:selected").text(); //获取选中记录的text值

 jQuery获取Select选择的Text和Value:

 代码如下 复制代码

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

2. var checkValue=jQuery("#select_id").val();   //获取Select选择的option Value

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

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

jQuery添加/删除Select的Option项:

 代码如下 复制代码

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

2. jQuery("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)
3. jQuery("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)

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

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

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

内容清空:

 代码如下 复制代码

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

javascript select操作

2、运用new Option("文本","值")方法添加选项option

 代码如下 复制代码

var obj = document.getElementById("mySelect");
obj.add(new Option("4","4"));

3、删除所有选项option

 代码如下 复制代码

var obj = document.getElementById("mySelect");
obj.options.length = 0;

4、删除选中选项option

 代码如下 复制代码

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options.remove(index);

5、修改选中选项option

 代码如下 复制代码

var obj = document.getElementById("mySelect");
var index = obj.selectedIndex;
obj.options[index] = new Option("three",3); //更改对应的值
obj.options[index].selected = true; //保持选中状态

6、删除select

 代码如下 复制代码

var obj = document.getElementById("mySelect");
obj.parentNode.removeChild(obj); //移除当前对象

7、select选择的响应事件

 代码如下 复制代码

$("#mySelect").change(function(){
//添加所需要执行的操作代码
})

8、 select 中 option隐藏和显示

 代码如下 复制代码
var sss = $("select option").map(function(){                       
return $(this).val();                  
 });

使用sss[0]就可以得到值了。

 代码如下 复制代码
$("#select1 option[value='3']).hide();
时间: 2024-08-02 14:32:15

jquery/js中select option操作总结的相关文章

jQuery:delegate中select()不起作用的解决方法

 本篇文章只要是对jQuery:delegate中select()不起作用的解决方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery有一个很好用的delegate(事件委派)功能,可以给当前以及将来(动态添加)的元素绑定一个事件处理函数.   比如下面的例子,动态添加一个输入文本框后,我想让所有文本框(不管是不是动态添加的)在获取焦点时,自动转大写.   代码如下: <!doctype html> <html> <head>     <

JS中FRAME的操作问题实例分析_javascript技巧

本文实例探讨了JS中FRAME的操作问题,分享给大家供大家参考.具体分析如下: 以上图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取. 一.  首先从 父(frameABC)------->子(frameA,frameB,frameC) ① 访问变量名name 假如在frameABC中操作那么可以: 复制代码 代码如下: window.frames("frameA").contentWindow.name 或者 复制代码 代码如下: docu

jquery如何获取select option的值及对select option的操作

jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#sele

js中select下拉框常用操作方法

js 操作select和option 1.动态创建select  代码如下 复制代码      function createSelect(){ var mySelect = document.createElement_x("select");           mySelect.id = "mySelect";           document.body.appendChild(mySelect);       } 2.添加选项option  代码如下 复

JQUERY/js获取SELECT选择项的文本内容

JQUERY获取SELECT 选择项的文本内容 获取值  代码如下 复制代码 var checkValue=$("#select_id").val();  //获取Select选择的Value 试了很久才弄出来  代码如下 复制代码 $("#tid option:selected").text(); js 获取select text的值方法如下:  代码如下 复制代码 var ts1 = ss.options[ss.selectedIndex].text;//第一或

JS中的二进制操作简介

写这篇博客的起源是小胡子哥的一篇文章<你所不知道的JavaScript数组你所不知道的JavaScript数组>. 因为随着XHR2和现代浏览器的普及,在浏览器当中处理二进制不再向过去那样无所适从,随着Canvas/WebGL等新技术逐渐开始进入大众视野,也会用到一些字节数组或者16位.8位整数等东西.在node.js刚刚发布的4.0版本中,Buffer的底层使用了更符合JS标准的Uint8Array来实现,浏览器和node.js再次向相同的目标靠近了一点点,所以对于JS中处理二进制,我就打算

Node.js中使用mongoskin操作mongoDB实例_node.js

一.废话 从13年1月份接触mongodb进行开发,开发了旅游标签服务.微博标签检索系统.地图服务.web APP服务...使用MongoDB的场景从.NET.JAVA环境转到了node.js平台.越发觉Node.js和mongodb结合感觉的很好.感觉mongodb和node.js是天生的一对.的确,mongodb的客户端是JS的解析引擎.因此,选择mongodb和node.js做产品原型也是很nice的选择.网上,遇到网友询问mongodb的开发,选择哪个driver最好,以前一直是使用原生

jQuery:delegate中select()不起作用的解决方法(实例讲解)_jquery

jQuery有一个很好用的delegate(事件委派)功能,可以给当前以及将来(动态添加)的元素绑定一个事件处理函数. 比如下面的例子,动态添加一个输入文本框后,我想让所有文本框(不管是不是动态添加的)在获取焦点时,自动转大写. 复制代码 代码如下: <!doctype html><html><head>    <title>delegate测试</title> <script type="text/javascript"

JS &amp; JQuery 动态添加 select option_javascript技巧

今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);