`
zhangfeilo
  • 浏览: 399820 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
社区版块
存档分类
最新评论

jquery 对select中的option操作

阅读更多

Jquery的功能很强大,下面介绍Jquery操作表单Select元素的用法: 

jQuery获取Select元素,并选择的Text和Value: 

1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 
2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 
3. var checkValue=$("#select_id").val();  //获取Select选择的Value 
4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值 
5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 

jQuery获取Select元素,并设置的 Text和Value: 
实例分析: 
1. $("#select_id ").get(0).selectedIndex=1;  //设置Select索引值为1的项选中 
2. $("#select_id ").val(4);   // 设置Select的Value值为4的项选中 
3. $("#select_id option[text='jQuery']").attr("selected", true);   //设置Select的Text值为jQuery的项选中 

jQuery添加/删除Select元素的Option项: 
实例分析: 
1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项) 
2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置) 
3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个) 
4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个) 
5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option 
6. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option 


三级分类 <select name="thirdLevel" id="thirdLevel" 
onchange="getFourthLevel()"> 
<option value="0" id="thirdOption"> 
请选择三级分类 
</option> 
</select> 
</div> 

四级分类: 
<select name="fourthLevelId" id="fourthLevelId"> 
<option value="0" id="fourthOption"> 
请选择四级分类 
</option> 
</select> 

</div> 

.if($("#thirdLevel").val()!=0){ 
$("#thirdLevel option[value!=0]").remove(); 

if($("#fourthLevelId").val()!=0){ 
$("#fourthLevelId option[value!=0]").remove(); 
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到! 

所以收藏下! 

分享到:
评论

相关推荐

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`&lt;select&gt;`元素作为用户交互的重要部分,常用于提供一系列选项供用户选择。jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得...

    用jquery获取select标签中选中的option值及文本的示例

    根据提供的文件信息,我们可以了解到如何使用jQuery来获取HTML中select标签的选中项(option)的值(value)和文本内容(text)。以下是详细的知识点: 1. 引入jQuery库:要使用jQuery操作DOM元素,必须先引入...

    JQuery操作select

    在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它提供了简洁、强大的API来操作DOM元素,包括对select这样的下拉列表的操作。本篇文章将详细讲解如何使用jQuery来操作select。 首先,`changeShipMethod`...

    JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 代码如下: $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 var checkText=$(“#select_id”).find(“option:selected”).text(); ...

    [转]Jquery操作select 收藏

    在jQuery中操作select,我们可以执行以下常见任务: 1. **获取和设置选中项**:使用`.val()`方法,可以获取或设置select的当前选中项的值。如`$('select').val()`返回选中项的值,`$('select').val('newValue')`则...

    jquery获得select option值

    使用jQuery可以方便地创建并添加新的`&lt;option&gt;`元素到下拉列表中。 2. **清空下拉列表的所有选项**: ```javascript $("#sel").empty(); ``` 使用`.empty()`方法可以清空下拉列表的所有选项。 以上就是从给定...

    jquery实现select互斥联动

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在本示例中,我们将探讨如何使用jQuery实现“select”元素的互斥联动效果,这是一种常见的表单控件交互设计,常用于...

    jquery select2组件

    总结来说,`jQuery Select2`组件以其强大的功能、良好的用户体验和高度的可定制性,成为了网页开发中不可或缺的工具。通过熟练掌握其使用方法和配置选项,开发者可以轻松地提升下拉菜单的交互性和美观度。

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

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

    jQuery获取Select标签的手册

    在jQuery中,对HTML表单元素的操作是相当常见的任务,特别是对于`Select`标签的处理。`Select`标签常用于创建下拉列表,允许用户在多个选项中进行选择。本手册将详细介绍如何使用jQuery获取和操作`Select`标签以及...

    jquery实现 两个select之间option的转移操作

    本文将深入探讨如何使用jQuery实现两个`&lt;select&gt;`元素之间的`&lt;option&gt;`选项转移操作,包括全选、单选以及删除功能。 首先,我们需要了解`&lt;select&gt;`和`&lt;option&gt;`的基本概念。`&lt;select&gt;`元素用于创建下拉列表,而`...

    jquery实现select带模糊搜索下拉选择框

    在网页开发中,`jQuery` 是一款非常流行的 JavaScript 库,它简化了DOM操作、事件处理、动画制作等任务。本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 ...

    Jquery操作select标签例子

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对`&lt;select&gt;`标签的操作。本文将详细讲解如何使用jQuery来管理HTML中的`&lt;select&gt;`元素,包括选择、更改选项,获取选中项的文本、值...

    jquery 超级select插件 v4.0版本

    考虑到实际项目中可能面临的浏览器兼容性问题,jQuery超级Select插件v4.0版本致力于兼容主流的现代浏览器,同时也尽可能对旧版浏览器提供支持。此外,它在性能上做了优化,如延迟初始化、虚拟DOM技术等,以确保在大...

    jquery操作select大全

    以下是一个综合实例,展示了如何使用jQuery监听select元素的变化,并在变化时获取选中的option的文本或值,并对select进行一些基本操作: ```javascript &lt;script src="jquery-1.2.1.js" type="text/javascript"&gt; $...

    select option带自定义图片

    以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 首先,我们需要理解HTML基础。`&lt;select&gt;`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`元素定义了下拉列表中的一...

    java Script ,jquery 写的 select 中的option 左右移动,上下移动

    总之,通过结合JavaScript和jQuery,我们可以轻松实现对HTML `&lt;select&gt;` 中`&lt;option&gt;`的移动操作,从而提供更丰富的用户交互体验。这种技术在许多需要自定义排序的场景中都非常实用,比如设置优先级、分类管理等。

    jQuery模拟select效果

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。在一些场合,由于浏览器兼容性问题或者设计需求,我们可能需要模拟原生HTML `&lt;select&gt;` 标签的功能,例如创建下拉...

    jquery select2

    1. **基础应用**:首先,需要在页面中引入jQuery库和Select2库的CSS及JS文件。然后,通过`$('select').select2()`初始化选择器。 ```html &lt;link href="https://cdn.jsdelivr.net/npm/select2@4.x/dist/css/select2....

    浅析jQuery对select操作小结(遍历option,操作option)

    本文主要探讨了jQuery对HTML中的select元素的操作,包括遍历option、添加和移除option等。 1. 遍历select元素中的option 在jQuery中,可以使用选择器结合.each()方法对select元素中的option进行遍历。例如,通过...

Global site tag (gtag.js) - Google Analytics