JS/JQuery操作select下拉框

一、js 操作select 下拉框

var selObj = 下拉框对象

1. 移除所有项:
selObj.options.length = 0;

2. 移除下拉框中的一项:
selObj.options.remove(index);

“index”为下拉框选项的索引值,若0索引项移出(自上而下),那么1索引项的索引会变为0,后面的索引依次向前推进

也可利用循环,移除所有项:

var length = selObj.options.length;

for(var i=length-1;i>=0;i--){

    selObj.options.remove(i);
}

3. 移除下拉框的选中项:
selObj.options[selObj.selectedIndex] = null;

“selectedIndex”为下拉框选中项的索引值,“options[index]”这里也是获取下拉框索引值=index的选项

4. 添加下拉框选项: 
selObj.options.add(new Option(text, value));

“text”为下拉框选项的显示文本,“value”为下拉框选项的值,此方法会在下拉框末尾添加,索引值最大

5. 修改下拉框选中项:
selObj.options[selObj.selectedIndex] = new Option(text , value);

6. 获取下拉框选中项的值:
selObj.options[selObj.selectedIndex].value

7. 下拉框是否选中:
selObj.selectedIndex > -1 ? //选中 ://没有选中

二、jQuery 操作select 下拉框

var selId = 下拉框对象ID

1. 获取指定下拉框选项:
$("#selId").find("option:selected");

“option:selected”为选中项,“option:first”为首项(索引值为0),“option:last”为末项(索引值最大)

$("#selId option[value=‘xxx‘]")

获取下拉框选项值为“xxx”的选项

//$("#selId option[text=‘xxx‘]");
//$("#selId option[index=‘x‘]");

以上2种方法测试后,均返回Object,但.val()方法返回undefined,.text()方法返回为空,.attr("selected", true)方法更无效果,建议不要使用!!

2. 获取下拉框选中项的文本:
$("#selId").find("option:selected").text();

3. 获取下拉框选中项的值:
$("#selId").val();

4. 获取下拉框选中项的索引:
$("#selId").get(0).selectedIndex;

“get(0)”即获取选中项

例如:

<select id="selId">
    <option value="a">AAA</option>
    <option value="b">BBB</option>
    <option value="c">CCC</option>
    <option value="e" selected="selected">EEE</option>
</select>

用此方法获取以上下拉框选中项的索引值为3。

5. 设置下拉框的选中项:
$("#selId").get(0).selectedIndex = index;

设置下拉框中选项的索引值=index的项为选中项

$("#selId").attr("value","xxx“);
$("#selId").val("xxx");
$("#selId").get(0).value = "xxx";

以上3个方法都是设置下拉框中选项的值=“xxx”的项为选中项

6. 添加下拉框选项:
$("#selId").append("<option value=‘Value‘>Text</option>");

$("#selId").prepend("<option value=‘Value‘>Text</option>");

“append”在下拉框末尾添加,添加后此项索引值最大; “prepend”在下拉框的首部添加,添加后此项索引值为0

7. 移除下拉框选项:
$("#selId option[value=‘xxx‘]").remove();

移除下拉框选项值为“xxx”的选项

8. 清空下拉框所有选项:
$("#selId").empty();
$("#selId option").remove();

时间: 2024-11-07 09:02:31

JS/JQuery操作select下拉框的相关文章

jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

jquery操作select下拉框的多种方法(选中,取值,赋值等)

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

jquery操作select下拉框的多种方法(选中,取值,赋值等) 转载

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=$("#se

selenium webdriver学习(八)------------如何操作select下拉框(转)

selenium webdriver学习(八)------------如何操作select下拉框 博客分类: Selenium-webdriver 下面我们来看一下selenium webdriver是如何来处理select下拉框的,以http://passport.51.com/reg2.5p这个页面为例.这个页面中有4个下拉框,下面演示4种选中下拉框选项的方法.select处理比较简单,直接看代码吧:) Java代码   import org.openqa.selenium.By; impo

js如何获取select下拉框的value以及文本内容

select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现在我就写一段代码,简单的说明一下如何获取value值以及文本内容(text),必要地添加了注释,希望对下拉框还不太熟悉的朋友有所帮助.html代码: 1 </HEAD> 2 <BODY> 3 4 书籍分类: 5 <select id="s1" > 6 &

jquery Combo Select 下拉框可选可输入插件

Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行检索过滤,同时支持键盘控制. 支持浏览器: Safari, Chrome, Firefox, Opera iOS, Android, IE Mobile Internet Explorer IE 8 and above 开源地址:http://www.oschina.net/p/combo-sele

Jquery学习笔记:利用jquery获取select下拉框的值

jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>

Selenium-&gt;如何操作Select下拉框(七)

public static void main(String[] args) { WebDriver dr = new FirefoxDriver(); dr.get("http://passport.51.com/reg2.5p"); //通过下拉列表中选项的索引选中第二项,即2011年 Select selectAge = new Select(dr.findElement(By.id("User_Age"))); selectAge.selectByIndex

JavaScript操作select下拉框选项移动

运行结果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项移动</title> 6 </head> 7 <body> 8 <table width="285" height="169" border=