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;

相关文章

  • JavaScript基于setTimeout实现计数的方法

    JavaScript基于setTimeout实现计数的方法

    这篇文章主要介绍了JavaScript基于setTimeout实现计数的方法,涉及javascript中setTimeout方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中的类(Class)详细介绍

    JavaScript中的类(Class)详细介绍

    这篇文章主要介绍了JavaScript中的类(Class)详细介绍,本文讲解了JavaScript中类的定义、JavaScript中的Constructor(构造函数)、类名等内容,需要的朋友可以参考下
    2014-12-12
  • 微信小程序前端源码逻辑和工作流

    微信小程序前端源码逻辑和工作流

    这篇文章主要介绍了微信小程序前端源码逻辑和工作流 的相关资料,本文还给大家提供了文本基本结构图和实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 微信小程序获取当前位置和城市名

    微信小程序获取当前位置和城市名

    这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • js 下拉菜单实现代码

    js 下拉菜单实现代码

    js 下拉菜单实现代码,原理比较简单,需要的朋友可以参考下,具体的美化要靠自己。
    2010-05-05
  • 如何在 JavaScript 中更好地利用数组

    如何在 JavaScript 中更好地利用数组

    这篇文章主要介绍了如何在 JavaScript 中更好地使用数组,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 微信小程序利用button控制条件标签的变量问题

    微信小程序利用button控制条件标签的变量问题

    这篇文章主要介绍了微信小程序利用button控制条件标签的变量问题,本文分步骤给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-03-03
  • jszip插件实现图片打包下载的方法分析

    jszip插件实现图片打包下载的方法分析

    这篇文章主要介绍了jszip插件实现图片打包下载的方法,结合实例形式分析了JavaScript使用jszip插件依据图片列表打包下载zip压缩文件的相关操作技巧,需要的朋友可以参考下
    2023-05-05
  • JavaScript版TAB选项卡效果实例

    JavaScript版TAB选项卡效果实例

    tab选项卡效果就是当我指上或经过时就会显示这个选项卡下面的内容,下面我来给大家介绍一款纯js实现的TAB选项卡效果,有需要的朋友可以参考一下
    2013-08-08
  • 更靠谱的H5横竖屏检测方法(js代码)

    更靠谱的H5横竖屏检测方法(js代码)

    这篇文章主要为大家详细介绍了更靠谱的横竖屏检测方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09

最新评论