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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 10 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
Moment的feature导致线上bug解决分析
Sep 23 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 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
Python base64编码解码实例
2015/06/21 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python实现事件驱动
2018/11/21 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python增加图像对比度的方法
2019/07/12 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
opencv python如何实现图像二值化
2020/02/03 Python
python实现图像拼接功能
2020/03/23 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
大学生物业管理求职信
2013/10/24 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
关于保护环境的建议书
2014/05/13 职场文书
龙猫观后感
2015/06/09 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技