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


Posted in Javascript onOctober 29, 2013

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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 #Javascript
javascript在myeclipse中报错的解决方法
Oct 29 #Javascript
web css实现整站样式互相切换
Oct 29 #Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 #Javascript
JS 页面计时器示例代码
Oct 28 #Javascript
js如何判断不同系统的浏览器类型
Oct 28 #Javascript
使用js的replace()方法查找字符示例代码
Oct 28 #Javascript
You might like
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
IE8 原生JSON支持
2009/04/13 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
Jquery $when done then的用法详解
2016/05/20 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python操作mysql数据库
2017/03/05 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python def 定义函数,调用函数方式
2020/06/02 Python
python中adb有什么功能
2020/06/07 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
关于责任的演讲稿
2014/05/20 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
小学语文新课改心得体会
2016/01/22 职场文书