`
dengjinxin
  • 浏览: 11232 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

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技术后经常会使用到!

转自:http://blog.sina.com.cn/s/blog_657332580100znjq.html
分享到:
评论

相关推荐

    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操作select 收藏" 可能是博主分享的一个关于如何使用jQuery高效地操作HTML中的&lt;select&gt;元素的教程。在网页设计中,select元素常用于创建下拉菜单,让用户从预设的选项中选择一个或多个值。 ...

    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 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之间option的转移操作

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

    jQuery获取Select标签的手册

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

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

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

    Jquery操作select标签例子

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

    jquery操作select大全

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

    jquery 超级select插件 v4.0版本

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

    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手机下拉框select

    jQuery Mobile 提供了一个专门的 Select Menu 插件,用于将标准的HTML `&lt;select&gt;` 元素转换为适合触摸操作的、具有高级样式的菜单。这个插件自动应用到页面中的所有`&lt;select&gt;`元素,无需额外的JavaScript代码。你...

    jquery select2

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

Global site tag (gtag.js) - Google Analytics