jquery操作select取值赋值与设置选中实例


Posted in Javascript onFebruary 28, 2017

本节内容:

jquery实现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;

以上这篇jquery操作select取值赋值与设置选中实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
javascript 必知必会之closure
Sep 21 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 #Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 #Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 #Javascript
canvas绘图不清晰的解决方案
Feb 28 #Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 #Javascript
js数字计算 误差问题的快速解决方法
Feb 28 #Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 #Javascript
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php 文件缓存函数
2011/10/08 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python 实现简单的电话本功能
2015/08/09 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python 把列表转化为字符串的方法
2018/10/23 Python
Python中is和==的区别详解
2018/11/15 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
聊聊python中的异常嵌套
2020/09/01 Python
python的链表基础知识点
2020/09/13 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
开办化妆品公司创业计划书
2013/12/26 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
高二政治教学反思
2014/02/01 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
银行自荐信范文
2015/03/25 职场文书
慈善募捐倡议书
2015/04/27 职场文书
庆元旦主持词
2015/07/06 职场文书
详解php中流行的rpc框架
2021/05/29 PHP