`

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

复制代码

 

分享到:
评论

相关推荐

    jquery 多功能select控件,多功能选择控件

    《jQuery多功能Select控件——实现高效交互与美观界面》 在网页开发中,Select控件是常见的用户交互元素,用于提供下拉选项供用户选择。然而,原生的HTML Select控件在功能和视觉效果上往往无法满足现代网页设计的...

    jquery select2组件

    **jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选...

    jquery 自定义select控件

    《jQuery自定义Select控件深度解析》 在Web开发中,Select控件是常见的表单元素,用于提供用户选择选项的功能。然而,原生的Select控件在样式和交互上存在局限性,不能满足现代网页设计的需求。为了解决这个问题,...

    JQuery 时间控件、日期控件

    开发者可以监听和响应Datepicker和Timepicker的各种事件,如"change"、"close"和"select",以便在用户选择日期或时间后执行相应的操作。此外,还可以调用提供的方法,如`.datepicker("getDate")`获取选定的日期,...

    jquery.inputer 完美替换select控件 带模糊搜索

    1.jquery.inputer为替代select控件开发! 2.本控件经过测试,兼容IE,火狐! 3.本控件可以自由扩展! 4.本控件为原创,代码有些凌乱,但功能齐全! ---本控件代码为本人编写,完全处于分享拿出来的,有什么地方写的...

    jquery下拉控件

    《jQuery下拉控件:打造高效交互体验》 在网页设计和开发中,下拉控件(Dropdown)是常见的交互元素之一,它通常用于提供多个选项供用户选择。原生的HTML `&lt;select&gt;` 标签虽然能实现基本功能,但在样式定制、交互...

    Jquery双向select控件Bootstrap Dual Listbox

    Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件,它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景,用户可以轻松地进行批量选择...

    SELECT控件 美化

    4. **样式控制**:使用CSS或者jQuery的`.css()`方法定制SELECT控件的外观,包括字体、颜色、边框、背景、阴影等,甚至可以实现动画效果,提升用户体验。 5. **兼容性处理**:为了确保在各种浏览器中都能正常工作,...

    select选择框控件jquery-editable-select支持编辑输入

    总的来说,jQuery Editable Select 是一个强大的工具,能够为网页中的选择框控件增添编辑和输入功能,提升用户交互体验。通过深入理解和灵活运用这个插件,开发者可以创建出更符合用户需求的动态下拉列表。

    jquery实现select互斥联动

    在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于多级筛选或配置场景。 一、基本概念 1. jQuery:jQuery 是一个高效、简洁而易用的JavaScript库,...

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

    以下是对标题和描述中提到的jQuery操作select控件的相关知识点的详细说明: 1. **获取select控件的选择状态**: - `$("#select_id").change(function() {...})`:这个代码片段用于为指定ID的select元素添加change...

    移动设备 select jquery插件

    "移动设备 Select jQuery 插件"就是为了解决这个问题而设计的,它提供了高度可定制且具有良好触控体验的选择器组件,适用于手机端应用。 此插件基于jQuery框架,意味着它可以轻松地与现有的jQuery代码集成,提供了...

    select2控件回显方法

    JavaScript 技术: select2控件选择多个数据,以及回显数据的方法 。

    美化select控件Jquery chosen

    "美化select控件Jquery chosen"正是为了解决这一问题而存在的。Chosen是一个流行的jQuery插件,它提供了美观且易用的多选和单选下拉菜单,极大地提升了用户体验。 Chosen插件的核心特性包括: 1. **美化样式**:...

    mobileSelect移动端手机下拉控件

    mobileSelect控件通过简洁的API和丰富的自定义选项,使得开发者能够轻松地在移动应用中集成高质量的下拉选择功能。 首先,我们来探讨一下mobileSelect的核心特性: 1. **响应式设计**:mobileSelect控件具备良好的...

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

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

    史上最强大的select控件(可搜索的下拉框),支持汉字中文、拼音首字母、英文搜索方式

    史上最强大的select控件(可搜索的下拉框),支持汉字中文、拼音首字母、英文搜索方式 依赖高版本的jquery ,适应各种高版本的浏览器。 调用方法: 对任意一个&lt;select id="select1"&gt; 不需要做任何改动,只需加入以下...

    jQuery select小控件适用IE6、IE7、IE8

    这个控件实现相当简单,基于jQuery实现,只编写一些基本功能,满足一般使用。提供原代码,可以根据自己的项目要求修改,只在IE6、IE7、IE8、IE9中测试。有问题联系邮箱:zliuyao2010@163.com 初始化构造 ...

    只选年月日期控件(jQuery)

    7. **事件处理**:jQuery提供`.change()`事件,可以监听用户在下拉菜单中做出的选择,并根据这些选择更新其他相关部分的视图或执行后台操作。 8. **兼容性与响应式设计**:确保控件在不同浏览器和设备上表现一致是...

    可编辑并自动提示的select控件

    标题中的“可编辑并自动提示的select控件”指的是在Web开发中,使用特定的JavaScript库或组件,创建一种能够动态提示选项,并且允许用户编辑输入的下拉选择框(Select)控件。这种控件通常用于提高用户体验,让用户...

Global site tag (gtag.js) - Google Analytics