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 相关文章推荐
用正则表达式替换图片地址img标签
Nov 22 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JS中数组重排序方法
Nov 11 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
JavaScript编码小技巧分享
Sep 17 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JSON取值前判断
2014/12/23 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python、Javascript中的闭包比较
2015/02/04 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python-接口开发入门解析
2019/08/01 Python
python sorted方法和列表使用解析
2019/11/18 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python如何实现远程方法调用
2020/08/07 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
师范毕业生自荐信
2013/10/17 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
住宅使用说明书
2014/05/09 职场文书
中职生自荐信范文
2014/06/15 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
外出学习心得体会范文
2016/01/18 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
Java spring单点登录系统
2021/09/04 Java/Android