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();

赞 (0)

相关推荐

  • 浅析jQuery操作select控件的取值和设值

    1.级联select的操作,后一个select的值随着前一个select选中值变化 $(".select_A").change(function(){ $(".select_B").empty();// 清空后一个select var option = $("<option>").val(1).text('xxx');// 按照实际业务要求重新赋值option $(".select_B").append(optio

  • jQuery实现两个select控件的互移操作

    jQuery实现两个select控件的互移操作

    一.直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> </head> <body> <div> <select id="leftSelector" multiple="multiple" name="SmsLis

  • 轻松使用jQuery双向select控件Bootstrap Dual Listbox

    轻松使用jQuery双向select控件Bootstrap Dual Listbox

    本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <

  • jQuery选中select控件 无法设置selected的解决方法

    解决办法:把选中option的语句放到setTimeout中,例: 复制代码 代码如下: setTimeout(function() { var selSorts = $("select[id^='" + controls.selsort + "']"); $.each(selSorts, function(index, sort) { var ope = $(sort).find("option[value='" + arrSort[index

  • jquery下拉select控件操作方法分享(jquery操作select)

    JQuery获取和设置Select选项方法汇总如下: 代码: 复制代码 代码如下: $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Textvar checkValue=$("#select

  • jquery通过扩展select控件实现支持enter或focus选择的方法

    本文实例讲述了jquery通过扩展select控件实现支持enter或focus选择的方法.分享给大家供大家参考,具体如下: /*************************************** * @ author jdkleo * @ date 2013/2/27 JQuery SelKeys USAGE: jQuery.selkeys.enter(jQuery("#selcon")); jQuery.selkeys.focus(jQuery("#selcon

  • JQuery select控件的相关操作实现代码

    获取select 先看看下面代码: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id").val

  • jQuery Html控件基本操作(日常收集整理)

    闲来无聊,收集总结一下jQuery常用操作,希望对新手有用. 基于jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js&q

  • Javascript操作select控件代码实例

    这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新增.修改.删除.选中.清空.判断存在等 1.判断select选项中 是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect

  • 浅析Bootstrip的select控件绑定数据的问题

    此问题让我倒弄了一下午时间,最后终于被我拿下.下面小编把我的功劳分享出来,以此来做个备份,同时也希望能帮助到大家. 具体详情如下所示: $(function(){ var stu_no = freeUrl(); var data, subname="",data2; var sbList = new Array(); $.ajax({ async: false , dataType: "json", contentType: "application/js

  • Jquery获得控件值的三种方法总结

    一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox> 1. $("#<%=txtUserID.ClientID%>").val(); 2. $("inpu

  • ANGULARJS中使用JQUERY分页控件

    ANGULARJS中使用JQUERY分页控件

    首篇,不知写何物,思来想去,敬上分页控件使用方法,望共同探讨. 分页乃前端数据展现之常用功能,而在我们使用的Angular js中,原生的分页需要将数据全部取到前端后,然后再到前端分页,在大批量数据操作时并不实用.接下来,我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法. 首先在web项目中引用jquery1.10.Angularjs库文件以及jq-pagination控件. 我降指令名称为custompagination,为指令添加Html样式. 然后给指令添加对应的控

  • jquery 分页控件实现代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jquery分页控

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

随机推荐