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

JQuery获取和设置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控件的相关操作实现代码

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

  • 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控件的取值和设值

    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控件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控件实现支持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控件操作方法分享(jquery操作select)

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

  • Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    背景 最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 "getAllSelections"方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑.所以今天总结出来,既是自己的学习,也分享给大家,希望能够有些帮助. 如何解决 添加这个下拉列表有以下两种方法: 利用Column options 中的 formatter 将数据转换成下拉列表的形式 使用bootstrap-table拓展中的editable插件 这次主要介绍第一种,基本的思

  • 可输入文字查找ajax下拉框控件 ComBox的实现方法

    GooFunc.js文件 //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 function getElCoordinate(dom) { var t = dom.offsetTop; var l = dom.offsetLeft; dom=dom.offsetParent; while (dom) { t += dom.offsetTop; l += dom.offsetLeft; dom=dom.offsetParent; }; return { top: t, lef

  • Android官方下拉刷新控件SwipeRefreshLayout使用详解

    Android官方下拉刷新控件SwipeRefreshLayout使用详解

    可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介: SwipeRefreshLayout组件只接受一个子组件:即需要刷新的那个组件.它使用一个侦听机制来通知拥有该组件的监听器有刷新事件发生,换句话说我们的Activity必须实现通知的接口.该Activity负责处理事件刷新和刷新相应的视图.一旦监听者接收到该事件,就决定了刷新过程中应处理的地方.如果要展示一个"刷新动画",它必须

  • Java Swing组件下拉菜单控件JComboBox用法示例

    Java Swing组件下拉菜单控件JComboBox用法示例

    本文实例讲述了Java Swing组件下拉菜单控件JComboBox用法.分享给大家供大家参考,具体如下: JComboBox是Swing中的下拉菜单控件.它永远只能选中一个项目,然而比单选按钮节省空间.如果使用setEditable设置为true则内部选项的文本可以编辑,因此这种组件被称为组合框.注意,对选项的编辑只会影响当前项,而不会改变列表内容.可以使用addItem方法来添加选项列表,或者使用insertItemAt在任何位置插入选项:然而如果有大量选项需要添加,这种方法是非常笨重的,可

  • Python tkinter 下拉日历控件代码

    tkinter 下拉日历控件 网上找的不完善的Tk日历进行修改的,可以快捷的找到并返回日期. 效果如下图,上面的是控件,下面的是调用demo窗口 如下所示: # -*- coding: utf-8 -*- import calendar import tkinter as tk import tkinter.font as tkFont from tkinter import ttk datetime = calendar.datetime.datetime timedelta = calend

  • iOS编写下拉刷新控件

    iOS编写下拉刷新控件

    现在iOS里有很多成熟的下拉刷新控件,比如MJRefresh,SVPullToRefresh 我这里参考了SV的写法,但是回调用的是代理,没有用block,个人感觉用代理更简洁一点 下拉刷新的基本原理 在scrollview的上面和下面分别添加一个view,上面的是下拉的时候展示下拉动画的headerView,下面的是上拉加载更多的时候展示动画的footerView 这里的headerView和footerView都是自己添加的,和tableView自己的header,footer不一样 hea

  • Android实现支持所有View的通用的下拉刷新控件

    Android实现支持所有View的通用的下拉刷新控件

    下拉刷新对于一个app来说是必不可少的一个功能,在早期大多数使用的是chrisbanes的PullToRefresh,或是修改自该框架的其他库.而到现在已经有了更多的选择,github上还是有很多体验不错的下拉刷新. 而下拉刷新主要有两种实现方式: 1. 在ListView中添加header和footer,监听ListView的滑动事件,动态设置header/footer的高度,但是这种方式只适用于ListView,RecyclerView. 2. 第二种方式则是继承ViewGroup或其子类,

  • Android中Spinner(下拉框)控件的使用详解

    Android中Spinner(下拉框)控件的使用详解

    android给我们提供了一个spinner控件,这个控件主要就是一个列表,那么我们就来说说这个控件吧,这个控件在以前的也看见过,但今天还是从新介绍一遍吧. Spinner位于 android.widget包下,每次只显示用户选中的元素,当用户再次点击时,会弹出选择列表供用户选择,而选择列表中的元素同样来自适配器.Spinner是View类得一个子类. 1.效果图 2.创建页面文件(main.xml) <Spinner android:id="@+id/spinner1" and

  • Android开发之无痕过渡下拉刷新控件的实现思路详解

    Android开发之无痕过渡下拉刷新控件的实现思路详解

    相信大家已经对下拉刷新熟悉得不能再熟悉了,市面上的下拉刷新琳琅满目,然而有很多在我看来略有缺陷,接下来我将说明一下存在的缺陷问题,然后提供一种思路来解决这一缺陷,废话不多说!往下看嘞! 1.市面一些下拉刷新控件普遍缺陷演示 以直播吧APP为例: 第1种情况: 滑动控件在初始的0位置时,手势往下滑动然后再往上滑动,可以看到滑动到初始位置时滑动控件不能滑动. 原因: 下拉刷新控件响应了触摸事件,后续的一系列事件都由它来处理,当滑动控件到顶端的时候,滑动事件都被下拉刷新控件消费掉了,传递不到它的子控件

随机推荐