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 相关文章推荐
Whatever:hover 无需javascript让IE支持丰富伪类
Jun 29 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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
PHP反向代理类代码
2014/08/15 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
vue2 前端搜索实现示例
2018/02/26 Javascript
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解python基础之while循环及if判断
2017/08/24 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
会计专业应届生求职信
2013/11/24 职场文书
应付会计岗位职责
2013/12/12 职场文书
英文演讲稿开场白
2014/08/25 职场文书
慰问信格式
2015/02/14 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书