`

jQuery Select操作大集合

    博客分类:
  • html
阅读更多

本文总结了jQuery获取Select选择的Text和Value;jQuery添加/删除Select的Option项的Select操作,并给与了对应的解释。

AD:
jQuery获取Select选择的Text和Value:
语法解释: 

    $( "#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最大的索引值 jQuery设置Select选择的Text和Value:  

语法解释:

    $( "#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的项选中  
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

分享到:
评论

相关推荐

    Jquery Select操作方法集合脚本之家特别版

    ### Jquery Select操作方法集合脚本之家特别版 在网页开发过程中,经常需要用到对`&lt;select&gt;`元素的操作,包括但不限于获取或设置选中的值、添加或删除选项等。本文将详细介绍如何利用jQuery来高效地完成这些操作。 ...

    jQuery对Select的操作大集合(收藏)

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对Select元素的处理。Select元素是HTML中用于创建下拉列表的标签,通常用于提供多个选项供用户选择。本文将深入探讨jQuery如何操作...

    jQuery jsTree大集合

    **jQuery jsTree大集合** **一、jQuery与jsTree简介** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。它的API设计直观易用,使得开发者能够更高效地...

    jquery select

    使用jQuery Select可以实现各种常见的DOM操作,例如改变元素的样式、内容,添加或移除类,响应用户交互,以及实现动画效果。在实际项目中,结合jQuery的其他方法,如`.on()`(绑定事件)、`.addClass()`(添加类)...

    jquery 动态遍历select 赋值的实例

    jQuery是一个快速、小巧、功能丰富的...通过本文的介绍和实例演示,可以看出利用jQuery进行动态内容更新的操作简洁而高效,能极大地丰富网页的交互体验。希望本文的内容能够给读者带来帮助,并在实际开发中得到应用。

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中,使用 jQuery 操作 DOM 元素是非常常见的需求之一。特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 ...

    多年收集的 JavaScript、jQuery 插件、UI 集合,值得温故知新的前端学习旅程

    5. **闰年下拉选框-生日.html**:这可能是创建一个包含闰年选项的日期选择器,可能用到了HTML的`&lt;select&gt;`元素,结合jQuery来动态生成和更新选项,同时考虑闰年的判断逻辑。 6. **倒计时.html**:倒计时功能是...

    jQuery select双向选择菜单.zip

    在IT行业中,jQuery库是广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本项目“jQuery select双向选择菜单”是基于jQuery实现的一种交互式UI组件,主要用于提高用户在网页上的选择体验。它...

    jquery_select

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画效果以及Ajax交互。在本话题中,我们将深入探讨如何使用jQuery来实现更高效的`select`选择器功能。 首先,让...

    Jquery特效插件集合

    jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。"Jquery特效插件集合"显然是一份包含多种jQuery特效插件的资源包,对于Web开发者来说,这些插件...

    jQuery插件集合

    jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。这个"jQuery插件集合"显然包含了多种用于增强和扩展jQuery功能的插件,使得开发者可以更轻松地实现复杂的功能...

    JQuery、C#两种操作ListBox的方法

    本篇文章将深入探讨如何使用JQuery和C#这两种不同的技术来操作ListBox。 首先,我们来了解一下JQuery。JQuery是一个强大的JavaScript库,简化了DOM操作、事件处理和Ajax交互。对于ListBox,JQuery提供了方便的方法...

    海量经典的jQuery插件集合

    ### 海量经典的jQuery插件集合 #### 引言 jQuery作为一款优秀的JavaScript库,以其简单易用的特点深受开发者喜爱。随着社区的发展壮大,出现了大量的jQuery插件来满足不同的开发需求。本文将对一系列经典的jQuery...

    jquery可选择条件筛选框

    虽然C#主要作为后台语言处理业务逻辑和数据库操作,但可以通过AJAX技术(基于jQuery)实现实时的前端交互,无需刷新整个页面。当用户在筛选框中选择条件时,jQuery可以捕获这些事件,然后通过AJAX发送请求到C#编写的...

    jQuery的图片裁剪插件集合

    jQuery图片裁剪插件为开发者提供了方便快捷的方式来实现图片裁剪功能,极大地提高了开发效率。在选择插件时,应根据项目需求,考虑插件的功能、性能、兼容性以及社区支持等因素。在实际应用中,可以通过文档学习和...

    jQuery常见开发技巧详细整理

    6. **链式操作**:jQuery的一大特性是链式操作,允许连续调用多个方法。例如,`$("#msg").show().slideUp().delay(500).fadeIn()`在一个动作序列中依次显示、滑动隐藏、延迟500毫秒后淡入元素。 7. **高效选择器**...

    jQuery技巧大放送

    jQuery提供了丰富的事件处理功能,如`.click()`, `.blur()`, `.focus()`, `.select()`, `.submit()`等。这些方法既可以触发事件,也可以用于绑定事件处理函数。例如,`.click(fn)`用于为元素添加点击事件监听器,而`...

Global site tag (gtag.js) - Google Analytics