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 相关文章推荐
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 Javascript
JavaScript实现左右滚动电影画布
Feb 06 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下常用正则表达式整理
2010/10/26 PHP
PHP 图片文件上传实现代码
2010/12/29 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
让您的菜单不离网站
2006/10/03 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技