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 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
node.js中 stream使用教程
Aug 28 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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
第八节--访问方式
2006/11/16 PHP
php 页面执行时间计算代码
2008/12/04 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
python解析文件示例
2014/01/23 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
出国留学介绍信
2014/01/13 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
离职证明范本
2015/06/12 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书