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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
javascript中的面向对象
Mar 30 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
js实现漂亮的星空背景
Nov 01 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异步多线程swoole用法实例
2014/11/14 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
关于爱情的广播稿
2014/01/16 职场文书
旅游网创业计划书
2014/01/31 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
业务员的岗位职责
2014/03/15 职场文书
爱国演讲稿500字
2014/05/04 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
老乡会致辞
2015/07/28 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS