- 浏览: 227588 次
- 性别:
- 来自: 济南
文章分类
- 全部博客 (143)
- linux (12)
- oracle (8)
- jdk (1)
- CentOS (10)
- 虚拟机 (1)
- Json (1)
- iBatis (3)
- spring (1)
- ExtJs (8)
- HTML (25)
- CSS (20)
- JS (49)
- Struts2 (3)
- Photoshop (1)
- web前端 (11)
- java (4)
- Knockout Js (3)
- 杂( ⊙o⊙ )? (1)
- Jquery (6)
- PhoneGap (3)
- jQuery Mobile (4)
- 移动开发 (3)
- android (5)
- VirsualSVN Server (1)
- NodeJs (5)
- UI&插件 (2)
- 数据库 (4)
- GitHub (1)
- 邮件 (3)
- MongoDB (2)
最新评论
-
xiajun612:
这样安装后,服务还是启动不了
Win8(.1) 安装VirtualSVN Server发生service visualSVN Server failed to start解决办法 -
原水小子:
pqiu 写道谢谢,成了,感谢您
客气,好东西就得分享
navicat for mysql 9.0.15注册码 -
pqiu:
谢谢,成了,感谢您
navicat for mysql 9.0.15注册码 -
原水小子:
jeffreyQiu 写道原水小子 写道敢问两位兄台尊姓大名? ...
安装升级IE9后一直自动弹出微软页面 解决办法 -
jeffreyQiu:
原水小子 写道敢问两位兄台尊姓大名?jeffreyQiu 写道 ...
安装升级IE9后一直自动弹出微软页面 解决办法
jQuery是如何控制和操作select的。先看下面的html代码
<select id="test"> <option value="1">选项一<option> <option value="2">选项一<option> ... <option value="n">选项N<option> </select>
所谓jQuery操作“select”, 说的更确切一些是应该是jQuery控制 “option”, 看下面的jQuery代码:
//获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').val(); //获取第二个option的值 $('#test option:eq(1)').val(); //获取选中的值 $('#test').val(); $('#test option:selected').val(); //设置值为2的option为选中状态 $('#test').attr('value','2'); //设置最后一个option为选中 $('#test option:last').attr('selected','selected'); $("#test").attr('value' , $('#test option:last').val()); $("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val()); //获取select的长度 $('#test option').length; //添加一个option $("#test").append("<option value='n+1'>第N+1项</option>"); $("<option value='n+1'>第N+1项</option>").appendTo("#test"); //添除选中项 $('#test option:selected').remove(); //删除项选中(这里删除第一项) $('#test option:first').remove();、 //指定值被删除 $('#test option').each(function(){ if( $(this).val() == '5'){ $(this).remove(); } }); $('#test option[value=5]').remove(); //获取第一个Group的标签 $('#test optgroup:eq(0)').attr('label'); //获取第二group下面第一个option的值 $('#test optgroup:eq(1) : option:eq(0)').val();
转自:http://www.cnblogs.com/shuang121/archive/2011/05/11/2043392.html
转自:http://www.cnblogs.com/shuang121/archive/2011/05/11/2043392.html1.判断select选项中 是否存在Value="paraValue"的Item
$("#selectid option[@value='paraValue']").length>0
2.向select选项中 加入一个Item
$("#selectid").append("<option value=''>1111<option>");
3.从select选项中 删除一个Item
$("#selectid").remove("<option value=''>1111<option>");
4.修改select选项中 value="paraValue"的text为"paraText"
$("#selectid option:selected").attr("value","paraValue").attr("text","paraText");
5. 设置select中text="paraText"的第一个Item为选中
$("#selectid option[@text='paraText']").attr("selected","true")
6.设置select中 value="paraValue"的Item为选中
$("#selectid option[@value='paraValue']").attr("selected","true")7.设置select中第一 个Item为选中
$("#selectid option").eq(0).attr('selected', 'true');8. 得到select的当前选中项的value
$("#selectid").val();
9.得到select的当前选中项的text
$("#selectid").text();
10. 得到select的当前选中项的Index
document.getElementById("select1").selectedIndex;
$("#selectid").get(0).selectedIndex
11. 清空select的项
$("#selectid").empty();JS版本的:
//1.判断select选项中 是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect,objItemValue) { var isExit = false ; for ( var i=0;i;I++) { if (objSelect.options[i].value == objItemValue) { isExit = true ; break ; } } return isExit; } //2.向select选项中 加入一个Item function jsAddItemToSelect(objSelect,objItemText,objItemValue, objItemPos) { //判断是否存在 if (jsSelectIsExitItem(objSelect,objItemValue)) { alert( "该Item的 Value值已经存在" ); } else { var varItem = new Option(objItemText,objItemValue); // objSelect.options[objSelect.options.length] = varItem; objSelect.options.add(varItem, objItemPos); alert( "成功加入" ); } } //3.从select选项中 删除一个Item function jsRemoveItemFromSelect(objSelect,objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect,objItemValue)) { for ( var i=0;i;I++) { if (objSelect.options[i].value == objItemValue) { objSelect.options.remove(i); break ; } } alert( "成功删除" ); } else { alert( "该 select中 不存在该项" ); } } //4.修改select选项中 value="paraValue"的text为"paraText" function jsUpdateItemToSelect(objSelect,objItemText,objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect,objItemValue)) { for ( var i=0;i;I++) { if (objSelect.options[i].value == objItemValue) { objSelect.options[i].text = objItemText; break ; } } alert( "成功修改" ); } else { alert( "该 select中 不存在该项" ); } } //5.设置select中text="paraText"的第一个 Item为选中 function jsSelectItemByValue(objSelect,objItemText) { //判断是否存在 var isExit = false ; for ( var i=0;i;I++) { if (objSelect.options[i].text == objItemText) { objSelect.options[i].selected = true ; isExit = true ; break ; } } //Show出结果 if (isExit) { alert( "成功选中" ); } else { alert( "该 select中 不存在该项" ); } } //6.设置select中value="paraValue"的Item 为选中 document.all.objSelect.value = objItemValue; //7.得到select的当前选中项的value var currSelectValue = document.all.objSelect.value; //8.得到select的当前选中项的text var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; //9.得到select的当前选中项的Index var currSelectIndex = document.all.objSelect.selectedIndex; //10.清空select的项 document.all.objSelect.options.length = 0;
发表评论
-
让页面滑动流畅得飞起来的新特性:Passive Event Listeners
2016-11-01 16:44 758function handler(event) { ... -
求多个数组的每一项互相拼接(多个产品属性组合)
2016-06-22 15:40 1738var models = [['BMW X1','BMW X ... -
js伪数组元素转成数组的方法详解
2016-06-08 15:46 10951。Array.prototype:就 ... -
html元素永远点不到···
2016-04-26 12:06 721function btn_move(el, mouseLef ... -
FullPage.js的使用方法和设置
2016-02-19 16:38 6655fullPage.js的使用方法和设置 ... -
详解IE11/chrome/firefox浏览器下Navigator各属性
2015-11-05 11:54 3925<!doctype html> <ht ... -
js跨域调http接口(jsonp)
2015-09-01 17:08 920<!DOCTYPE html> <ht ... -
判断电脑是否联网
2015-07-21 16:21 728function isOnline(){ -
DOM元素 onScrollToBottom监听示例
2015-04-27 15:20 794<!DOCTYPE html> <htm ... -
HTML5 FileReader用法:图片预览、文本文件预览等
2015-04-03 16:54 2116<!DOCTYPE html> <htm ... -
HTML5滤镜效果demo
2015-03-31 17:32 694<!DOCTYPE html> <htm ... -
纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法
2015-03-31 16:42 5116appendHTML: HTMLElem ... -
CSS3改变浏览器滚动条
2014-12-18 11:13 798::-webkit-scrollbar { widt ... -
IE6/IE7/IE8下float:right显示异常的解决方法
2014-10-11 11:43 1355最简单的方法就是调换顺序,将需要右浮动的元素 ... -
实用的 Javascript 技巧
2014-10-09 11:39 4671. 取整同时转成数值型: '10.567890'| ... -
js querySelector和getElementById通过id获取元素的区别
2014-09-19 20:59 666代码如下: <!DOCTYPE ... -
JS判断浏览器类型与版本
2014-09-01 12:02 5761.只判断类型: if (!!wi ... -
js onkeypress与onkeydown 事件区别详细说明
2014-08-07 22:47 1162本文将详细介绍js onkeypress与onkeydow ... -
jquery的data()方法与html5中DOM标签的dataset属性异同
2014-08-07 14:42 1141<div id="myModal&q ... -
判断JS对象是不是数组
2014-07-19 13:03 616Object.prototype.toString.call( ...
相关推荐
NULL 博文链接:https://effort-fan.iteye.com/blog/1214681
举例说明如何通过JQuery操作select
Jquery操作select标签:包含选中、更改选中;获取选中option的text值、value值和ndex索引值;标签的清空、删除和增加等。
Jquery中对下拉框的操作 包括选中 赋值等
这个文档是本人在开发学习中下的别人的资料,觉得汇总的很好,后面在工作过程中修改了一些,非常有用,尤其是前端的,基本上对select option的操作都在这里面了。有收藏价值。
使用Selenium自带的API操作Select元素时页面可能出现上移或遮挡,导致元素操作失败; 介于此问题,可以使用JQuery来操作Select元素,具体实现见附件。
这是一款select下拉框的效果主要是运用jquery.select.js插件进行操作的非常简便易用
jquery实现select下拉框的取值与赋值,设置选中的方法大全。 比如<select class=”selector”></select> 1、设置value为pxx的项选中 $(“.selector”).val(“pxx”); 2、设置text为pxx的项选中 $(“....
JQuery获取和设置Select选项方法汇总如下: 代码: 代码如下:$(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发var checkText=$(“#select_id”).find(“option:...
jquery操作Radio、Checkbox、Select详细Demo
主要介绍了jquery操作select常见方法,结合实例形式总结分析了jQuery操作select常见的7种情况与相关操作技巧,需要的朋友可以参考下
jQuery Air 用户管理界面应用插件,类似于我们以前讲到的jquery select的操作例子,点上面的all复选框后,下面的选项即可进行操作并保存。由于是在国外网站获取的源码,界面没有汉化,所以只能给大家一个灵感,学习...
本文实例汇总了jquery操作select的方法。分享给大家供大家参考。具体如下: jQuery获取Select选择的Text和Value: 语法解释: 代码如下:$(“#select_id”).change(function(){//code…});//为Select添加事件,当...
每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。 比如<select class=”selector”></select> 1、设置value为pxx的项选中 $(“.selector”).val(“pxx”); 2、设置...
本篇文章主要介绍了jQuery对Select的操作进行了详细的汇总,需要的朋友可以过来参考下,希望对大家有所帮助
JQuery对select的操作(01).zip 欢迎下载!
NULL 博文链接:https://yhjhoo.iteye.com/blog/652050
在jQuery基础上,美化select,自定义函数,不影响原先取值和增删改的操作