Js操作Select大全(取值、设置选中等等)


Posted in Javascript onOctober 29, 2013

jquery操作select(取值,设置选中)

每一次操作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;
Javascript 相关文章推荐
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
js表单验证实例讲解
Mar 31 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 #Javascript
javascript在myeclipse中报错的解决方法
Oct 29 #Javascript
web css实现整站样式互相切换
Oct 29 #Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 #Javascript
JS 页面计时器示例代码
Oct 28 #Javascript
js如何判断不同系统的浏览器类型
Oct 28 #Javascript
使用js的replace()方法查找字符示例代码
Oct 28 #Javascript
You might like
PHP网站提速三大“软”招
2006/10/09 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python中实现定制类的特殊方法总结
2014/09/28 Python
Python基本语法经典教程
2016/03/11 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
pytorch获取vgg16-feature层输出的例子
2019/08/20 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
外贸业务员的岗位职责
2013/11/23 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
小学数学国培感言
2014/03/10 职场文书
咖啡店创业计划书
2014/08/15 职场文书
酒会邀请函
2015/01/31 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript