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

相关文章

  • bootstrap data与jquery .data

    bootstrap data与jquery .data

    最近在做项目的时候用到了bootstrap,在使用中发现其data与jquery的data有些不一样的地方,记录一下,分享给大家
    2014-07-07
  • jQuery EasyUI 中文API Layout(Tabs)

    jQuery EasyUI 中文API Layout(Tabs)

    发布jQuery EasyUI 中文API—Layout(Tabs)总结,需要的朋友可以参考下。
    2010-04-04
  • jquery插件pagination实现无刷新ajax分页

    jquery插件pagination实现无刷新ajax分页

    这篇文章主要介绍了jquery插件pagination实现无刷新ajax分页的相关资料,需要的朋友可以参考下
    2015-09-09
  • jQuery实现文本框输入同步的方法

    jQuery实现文本框输入同步的方法

    这篇文章主要介绍了jQuery实现文本框输入同步的方法,涉及jQuery元素属性操作的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery操作 input type=checkbox的实现代码

    jQuery操作 input type=checkbox的实现代码

    jQuery操作 input type=checkbox的实现代码,需要的朋友可以参考下,这边脚本之家推荐大家看我们以前发布的文章
    2012-06-06
  • Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Jquery插件之Fancybox丰富的弹出层效果附源码下载

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片、图片集、Ajax数据,还能加载SWF影片,iframe页面等等
    2015-12-12
  • jQuery语法高亮插件支持各种程序源代码语法着色加亮

    jQuery语法高亮插件支持各种程序源代码语法着色加亮

    jQuery语法高亮插件能够对页面中的各种程序源代码语法着色加亮,并且支持多种语言,在此分享下,感兴趣的朋友可以参考下
    2013-04-04
  • 妙用Jquery的val()方法

    妙用Jquery的val()方法

    Jquery的val()方法不仅能够设置元素的值,同时也能获取元素的值。常见的操作是对文本框的操作,比如判断邮箱地址等
    2012-06-06
  • jQuery学习笔记之总体架构

    jQuery学习笔记之总体架构

    jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。如今,jQuery已经成为最流行的javascript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。那么作为一个前端设计师,怎么可能不来深入了解下jQuery呢,首先我们从他的总体构架开始吧
    2014-06-06
  • jQuery手机拨号界面特效代码分享

    jQuery手机拨号界面特效代码分享

    这篇文章主要介绍了jQuery手机拨号界面特效,整体特效非常逼真自然,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08

最新评论