jquery操作select取值赋值与设置选中实例

 更新时间:2017年02月28日 09:46:46   投稿:jingxian  
下面小编就为大家带来一篇jquery操作select取值赋值与设置选中实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本节内容:

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取值赋值与设置选中实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jquery判断单个复选框是否被选中的代码

    jquery判断单个复选框是否被选中的代码

    jquery判断单个复选框是否被选中的代码,需要的朋友可以参考下。
    2009-09-09
  • 分享五个有用的jquery小技巧

    分享五个有用的jquery小技巧

    作为轻量级的JS库,jQuery随着JavaScrīpt脚本的大热而备受Web开发者亲睐。本文给大家分享五个有用的jquery小技巧,需要的朋友可以参考下
    2015-10-10
  • jQuery中ajax的load()方法用法实例

    jQuery中ajax的load()方法用法实例

    这篇文章主要介绍了jQuery中ajax的load()方法用法,以实例形式较为详细的分析了load()方法的功能、参数及使用技巧,是非常实用的技巧,需要的朋友可以参考下
    2014-12-12
  • jQuery Validate 相关参数及常用的自定义验证规则

    jQuery Validate 相关参数及常用的自定义验证规则

    这篇文章主要介绍了jQuery Validate 相关参数及常用的自定义验证规则,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • JQuery与iframe交互实现代码

    JQuery与iframe交互实现代码

    JQuery与iframe交互实现代码
    2009-12-12
  • jquery动画效果学习笔记(8种效果)

    jquery动画效果学习笔记(8种效果)

    这篇文章分享了一份jquery动画效果学习笔记,针对jquery动画效果进行细致解析,对淡入淡出效果、滑动效果进行原理讲解,想要学好jquery动画效果,就耐心阅读本文,相信大家会有意想不到的收获。
    2015-11-11
  • jquery mobile实现拨打电话功能的几种方法

    jquery mobile实现拨打电话功能的几种方法

    在做一个便民服务电话,用到移动web中列出的电话,点击需要实现调用通讯录,拨打电话功能,有需要的朋友可以参考一下
    2013-08-08
  • 详解jQuery如何实现模糊搜索

    详解jQuery如何实现模糊搜索

    这篇文章主要介绍了jQuery如何实现模糊搜索,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 读jQuery之十 事件模块概述

    读jQuery之十 事件模块概述

    jQuery的事件模块是较复杂的,前面仅仅提到了对事件对象的包装。即统一了一些兼容性的问题。这篇会综述下jQuery的整个事件模块。
    2011-06-06
  • jquery常用的12个小功能

    jquery常用的12个小功能

    12个jquery常用功能,极好的,分享给大家,帮助大家更好的进行jQuery开发,感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论