1、设置value为pxx的项选中 $(".selector").val("pxx");2、设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("selected",true);这里有一个中括" />
当前位置:首页 > 日记 > 正文

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

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

相关文章

在Word2016文档中如何制作艺术字

在Word2016文档中如何制作艺术字

文档,艺术字,电脑软件,  在Word文档中,添加和制作艺术字是非常常用的一个操作,那么艺术字想要制作的好看的方法有很多种。以下是小编为您带来的关于Word2016文档制作艺术字,希望对您有所帮助。Word2016文档制作艺术字先打开word文档,然后在wo…

ps怎么制作高对比度黑白头像?

ps怎么制作高对比度黑白头像?

头像,黑白,高对比度,电脑软件,ps,想用自己头像,又觉得彩色会有点单调时,不妨试试简单的将自己照片这样调节一下。而且这样的效果在用于做lo时,也是一种独特的标示,效果如下图所示。软件名称:Adobe Photoshop CS3 v10.0 绿色增强简体中文版软件大…

Request获取Session的方法总结

Request获取Session的方法总结

方法,电脑软件,Request,Session,Request获取Session的方法总结1、无请求参数public HttpSession getSession()获取当前request关联的session,如果当前request没有session,创建一个session.2、有请求参数public HttpSession getSession(bool…

AI怎么绘制绿色的短信信息图标?

AI怎么绘制绿色的短信信息图标?

图标,绘制,短信,电脑软件,AI,ai中绘制矢量图标很方便,今天我们就来看看使用ai设计信息应用图标的教程,请看下文详细介绍。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:205MB更新时间:2014-05-111、打开ai软件,选…

AI复制粘贴的命令按钮使用方法

AI复制粘贴的命令按钮使用方法

复制粘贴,命令,使用方法,按钮,电脑软件,前面介绍了一种复制的办法,以及利用它结合使用,从而批量复制的办法。这一节我们介绍第二种复制的办法&mdash;&mdash;使用复制,粘贴的命令按钮,一起来看看吧。步骤:1、在自己新建的画布上任意绘制一个矩形…

纯js实现html转pdf的简单实例 | 推

纯js实现html转pdf的简单实例 | 推

推荐,简单实例,电脑软件,js,html,项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格、svg图片和样式。简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。咋不上天呢……查了一下,能够实现h…

在ppt中怎么添加棋盘动画效果的时

在ppt中怎么添加棋盘动画效果的时

标签,动画效果,棋盘,时间,电脑软件,  在我们的ppt中添加日期是一种现实幻灯片制作时间的标志,为了让添加的时间更加的具有动态感,我们可以对时间进行动画效果的设置。以下是小编为您带来的关于在ppt中添加棋盘动画效果的时间标签,希望对您有…

wps演示里怎么绘制圆锥图形

wps演示里怎么绘制圆锥图形

图形,方法,绘制,圆锥,演示,  老师在制作数学课件时可能需要用到圆锥,那么,怎样在wps演示中制作圆锥图形呢?对于新手来说熟练应用wps演示还是有一定难度,怎么办?下面就让小编告诉你 wps演示怎样制作圆锥的方法,欢迎大家来到学习wps 演示。wps…

Word 2013中使用模板创建日历的方

Word 2013中使用模板创建日历的方

方法,模板,日历,有哪些,电脑软件,  Word为了方便用户创建各种实用文档提供了大量的模板,用户可以直接从网站上下载使用。以下是小编为您带来的关于Word 2013中使用模板创建日历的方法,希望对您有所帮助。Word 2013中使用模板创建日历的方法…

qq情侣签名浪漫最新

qq情侣签名浪漫最新

情侣,浪漫,热门,新篇,经典,  热恋中的情侣,总盼时刻相聚,短暂分离,当然有如一日三秋呀!浪漫情侣qq签名,还有哪些呢?本文小编分享了浪漫情侣qq签名,欢迎欣赏。浪漫情侣qq签名【最新篇】你是我最简单的爱情,也是我最简单的温暖。你是我最难缠的想…

在word2013合并多个文档的两种方法

在word2013合并多个文档的两种方法

合并,方法,文档,多个,两种,  有时候,我们在网上download几篇Word文档,但需要将他们放进一篇文档里,那么此时合并文档就是个不错的选择了,那么下面就由小编给大家分享下word2013合并多个文档的技巧,希望能帮助到您。word2013合并多个文档方…