Js操作Select大全(取值、设置选中等等)

 更新时间:2013年10月29日 11:25:41   作者:  
Js操作Select是很常见的,也是比较实用的,每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了
jquery操作select(取值,设置选中)

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。

比如<select class="selector"></select>

1、设置value为pxx的项选中

$(".selector").val("pxx");

2、设置text为pxx的项选中

$(".selector").find("option[text='pxx']").attr("selected",true);

这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

$(".selector").val();

4、获取当前选中项的text

$(".selector").find("option:selected").text();

这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如:
复制代码 代码如下:

$(".selector1").change(function(){

// 先清空第二个

$(".selector2").empty();

// 实际的应用中,这里的option一般都是用循环生成多个了

var option = $("<option>").val(1).text("pxx");

$(".selector2").append(option);

});

Js操作Select大全

判断select选项中 是否存在Value="paraValue"的Item
向select选项中 加入一个Item
从select选项中 删除一个Item
删除select中选中的项
修改select选项中 value="paraValue"的text为"paraText"
设置select中text="paraText"的第一个Item为选中
设置select中value="paraValue"的Item为选中
得到select的当前选中项的value
得到select的当前选中项的text
得到select的当前选中项的Index
清空select的项
js 代码
复制代码 代码如下:

// 1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect, objItemValue) {
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
isExit = true;
break;
}
}
return isExit;
}

// 2.向select选项中 加入一个Item
function jsAddItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
alert("该Item的Value值已经存在");
} else {
var varItem = new Option(objItemText, objItemValue);
objSelect.options.add(varItem);
alert("成功加入");
}
}

// 3.从select选项中 删除一个Item
function jsRemoveItemFromSelect(objSelect, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options.remove(i);
break;
}
}
alert("成功删除");
} else {
alert("该select中 不存在该项");
}
}


// 4.删除select中选中的项
function jsRemoveSelectedItemFromSelect(objSelect) {
var length = objSelect.options.length - 1;
for(var i = length; i >= 0; i--){
if(objSelect[i].selected == true){
objSelect.options[i] = null;
}
}
}

// 5.修改select选项中 value="paraValue"的text为"paraText"
function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) {
//判断是否存在
if (jsSelectIsExitItem(objSelect, objItemValue)) {
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].value == objItemValue) {
objSelect.options[i].text = objItemText;
break;
}
}
alert("成功修改");
} else {
alert("该select中 不存在该项");
}
}

// 6.设置select中text="paraText"的第一个Item为选中
function jsSelectItemByValue(objSelect, objItemText) {
//判断是否存在
var isExit = false;
for (var i = 0; i < objSelect.options.length; i++) {
if (objSelect.options[i].text == objItemText) {
objSelect.options[i].selected = true;
isExit = true;
break;
}
}
//Show出结果
if (isExit) {
alert("成功选中");
} else {
alert("该select中 不存在该项");
}
}

// 7.设置select中value="paraValue"的Item为选中
document.all.objSelect.value = objItemValue;

// 8.得到select的当前选中项的value
var currSelectValue = document.all.objSelect.value;

// 9.得到select的当前选中项的text
var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

// 10.得到select的当前选中项的Index
var currSelectIndex = document.all.objSelect.selectedIndex;

// 11.清空select的项
document.all.objSelect.options.length = 0;

相关文章

  • 关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离

    关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离

    这篇文章主要介绍了关于微信小程序中使用wx.getLocation获取当前详细位置并计算距离,wx.getLocation只能够获取经纬度,不能够拿到详细地址,这里使用腾讯地图的api,需要的朋友可以参考下
    2023-04-04
  • 微信小程序用户授权、位置授权及获取微信绑定手机号

    微信小程序用户授权、位置授权及获取微信绑定手机号

    这篇文章主要介绍了信小程序用户授权、位置授权及获取微信绑定手机号,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • js自动闭合html标签(自动补全html标记)

    js自动闭合html标签(自动补全html标记)

    假如我有一个DIV,如果没有闭合后面的样式都会乱了,这样的代码可能会影响后面的样式,我希望用JS去自动闭合这种没有闭合的标签
    2012-10-10
  • javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

    javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值,本文给大家介绍javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别,需要的朋友参考下
    2015-11-11
  • 建立完全独立的JS对象

    建立完全独立的JS对象

    建立完全独立的JS对象...
    2006-12-12
  • Chart.js功能与使用方法小结

    Chart.js功能与使用方法小结

    这篇文章主要介绍了Chart.js功能与使用方法,结合实例形式分析了Chart.js功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS检测数组类型的方法小结

    JS检测数组类型的方法小结

    这篇文章主要介绍了js检测数组类型的方法小结,有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法,都是比较常用的,需要的朋友可以参考下
    2017-03-03
  • JavaScript实现签名板功能

    JavaScript实现签名板功能

    签名板在网页应用中扮演着重要角色,它们能够记录用户的手写签名或者绘图,下面就跟随小编一起来学习一下如何使用JavaScript实现签名板功能
    2024-10-10
  • Javascript处理循环的异步操作指南

    Javascript处理循环的异步操作指南

    这篇文章主要给大家介绍了关于Javascript处理循环的异步操作的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • 微信小程序设置滚动条过程详解

    微信小程序设置滚动条过程详解

    这篇文章主要介绍了微信小程序设置滚动条过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论