JQuery select控件的相关操作
JQuery获取和设置Select选项方法汇总如下:
获取select
先看看下面代码:
$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); //设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
获取select 选中的 text :
$("#ddlRegType").find("option:selected").text();
获取select选中的 value:
$("#nowamagic").val();
获取select选中的索引:
$("#nowamagic").get(0).selectedIndex;
设置select
jQuery添加/删除Select的Option项:
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
设置select 选中的索引:
//index为索引值
$("#nowamagic").get(0).selectedIndex=index;
设置select 选中的value:
$("#nowamagic").attr("value","Normal");
$("#nowamagic").val("Normal");
$("#nowamagic").get(0).value = value;
设置select 选中的text:
var count=$("#nowamagicoption").length;
for(var i=0;i<count;i++)
{ if($("#nowamagic").get(0).options[i].text == text)
{
$("#nowamagic").get(0).options[i].selected = true;
break;
}
}
清空 select:
$("#nowamagic").empty();
原文地址:http://www.nowamagic.net/jquery/jquery_SelectControl.php
JQuery select控件的相关操作的更多相关文章
- html select控件的jq操作
html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...
- RobotFramework教程使用笔记——时间控件的相关操作
在web测试过程中,我们可能会遇到时间控件,有的是支持直接输入的,有的为了保证输入时间格式的一致性是只支持点击选择的,那么这个时候如何用robotframework来操作呢? 看下面这个例子: 这个是 ...
- PyQt5日历控件及相关操作
1.日历控件QCalendarWidget控件import sys,mathfrom PyQt5.QtWidgets import *from PyQt5.QtGui import *from PyQ ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html
Jquery 操作Html 控件 CheckBox.Radio.Select 控件 在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...
- Jquery 操作Html 控件 CheckBox、Radio、Select 控件
在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- jquery仿jquery mobile的select控件效果
不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...
- js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)
原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...
随机推荐
- 一个Tomcat及一个ip,绑定不同的域名,各个域名访问各自不同应用程序的配置方法
http://nickandmiles.blog.163.com/blog/static/23422123201110151492166/ 条件是:这样一种实际情况是,就一台服务器,当公网的IP地址也 ...
- Google财经
本博文的主要内容有 .Google财经的介绍 .市场 .新闻 .投资组合新闻 .投资组合 1.Google财经的介绍 https://zh.wikipedia.org/wiki/Goog ...
- 【长篇高能】ReactiveCocoa 和 MVVM 入门
翻译自ReactiveCocoa and MVVM, an Introduction. 文中引用的 Gist 可能无法显示.为了和谐社会, 请科学上网. MVC 任何一个正经开发过一阵子软件的人都熟悉 ...
- [置顶] SpecDD系列:“完成” 的定义
在当今充满变数和快节奏的大环境下,一个产品的上市时间已经成为产品成功与否的重要因素.如果对于“完成”没有一个清晰的定义,那么很可能会遭遇产品延期,风险,并且增加公司成本. “完成的定义”也被俗称为Do ...
- C#与C++函数调用
在 上篇文章重点讲解数据类型的转换,在此基础上再讲解函数调用. 1.函数调用 c++中函数 INF_NET_API INF_RESULT WINAPI INF_NET_GetList(long lLo ...
- Centos6.x 安装vnc
一.安装gnome桌面环境 如果系统已经安装了gnome桌面环境,此步省略. # 安装fontforge,避免字体出现方框乱码 yum install fontforge -y # 安装gnome桌面 ...
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
When you implement a search bar, the user can make several different queries in a row. With a Promis ...
- Qt 学习之路:深入 Qt5 信号槽新语法
在前面的章节(信号槽和自定义信号槽)中,我们详细介绍了有关 Qt 5 的信号槽新语法.由于这次改动很大,许多以前看起来不是问题的问题接踵而来,因此,我们用单独的一章重新介绍一些 Qt 5 的信号槽新语 ...
- Qt 学习之路:Qt 简介
Qt 是一个著名的 C++ 应用程序框架.你并不能说它只是一个 GUI 库,因为 Qt 十分庞大,并不仅仅是 GUI 组件.使用 Qt,在一定程度上你获得的是一个“一站式”的解决方案:不再需要研究 S ...
- Qt 学习之路:模型-视图高级技术
PathView PathView是 QtQuick 中最强大的视图,同时也是最复杂的.PathView允许创建一种更灵活的视图.在这种视图中,数据项并不是方方正正,而是可以沿着任意路径布局.沿着同一 ...