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控件的相关操作的更多相关文章

  1. html select控件的jq操作

    html select控件的jq操作 1.判断select选项中 是否存在Value="paraValue"的Item $("#selectid option[@valu ...

  2. RobotFramework教程使用笔记——时间控件的相关操作

    在web测试过程中,我们可能会遇到时间控件,有的是支持直接输入的,有的为了保证输入时间格式的一致性是只支持点击选择的,那么这个时候如何用robotframework来操作呢? 看下面这个例子: 这个是 ...

  3. PyQt5日历控件及相关操作

    1.日历控件QCalendarWidget控件import sys,mathfrom PyQt5.QtWidgets import *from PyQt5.QtGui import *from PyQ ...

  4. 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 ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  6. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  7. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  8. jquery仿jquery mobile的select控件效果

    不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...

  9. js操作select控件大全(包含新增、修改、删除、选中、清空、判断存在等)

    原文:js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js操作select控件大全(包含新增.修改.删除.选中.清空.判断存在等) js 代码// 1.判断select选 ...

随机推荐

  1. 一个Tomcat及一个ip,绑定不同的域名,各个域名访问各自不同应用程序的配置方法

    http://nickandmiles.blog.163.com/blog/static/23422123201110151492166/ 条件是:这样一种实际情况是,就一台服务器,当公网的IP地址也 ...

  2. Google财经

    本博文的主要内容有 .Google财经的介绍   .市场    .新闻 .投资组合新闻   .投资组合 1.Google财经的介绍 https://zh.wikipedia.org/wiki/Goog ...

  3. 【长篇高能】ReactiveCocoa 和 MVVM 入门

    翻译自ReactiveCocoa and MVVM, an Introduction. 文中引用的 Gist 可能无法显示.为了和谐社会, 请科学上网. MVC 任何一个正经开发过一阵子软件的人都熟悉 ...

  4. [置顶] SpecDD系列:“完成” 的定义

    在当今充满变数和快节奏的大环境下,一个产品的上市时间已经成为产品成功与否的重要因素.如果对于“完成”没有一个清晰的定义,那么很可能会遭遇产品延期,风险,并且增加公司成本. “完成的定义”也被俗称为Do ...

  5. C#与C++函数调用

    在 上篇文章重点讲解数据类型的转换,在此基础上再讲解函数调用. 1.函数调用 c++中函数 INF_NET_API INF_RESULT WINAPI INF_NET_GetList(long lLo ...

  6. Centos6.x 安装vnc

    一.安装gnome桌面环境 如果系统已经安装了gnome桌面环境,此步省略. # 安装fontforge,避免字体出现方框乱码 yum install fontforge -y # 安装gnome桌面 ...

  7. [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 ...

  8. Qt 学习之路:深入 Qt5 信号槽新语法

    在前面的章节(信号槽和自定义信号槽)中,我们详细介绍了有关 Qt 5 的信号槽新语法.由于这次改动很大,许多以前看起来不是问题的问题接踵而来,因此,我们用单独的一章重新介绍一些 Qt 5 的信号槽新语 ...

  9. Qt 学习之路:Qt 简介

    Qt 是一个著名的 C++ 应用程序框架.你并不能说它只是一个 GUI 库,因为 Qt 十分庞大,并不仅仅是 GUI 组件.使用 Qt,在一定程度上你获得的是一个“一站式”的解决方案:不再需要研究 S ...

  10. Qt 学习之路:模型-视图高级技术

    PathView PathView是 QtQuick 中最强大的视图,同时也是最复杂的.PathView允许创建一种更灵活的视图.在这种视图中,数据项并不是方方正正,而是可以沿着任意路径布局.沿着同一 ...