`

jquery select 操作

阅读更多

 jquery操作select(取值,设置选中)

 

 

 

比如<select class="selector"></select>

 

1、设置value为pxx的项选中

 

     $(".selector").val("pxx");

 

 

2、设置text为pxx的项选中

 

    $(".selector").find("option[text='pxx']").attr("selected",true);

 

 

    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

 

3、获取当前选中项的value

 

    $(".selector").val();

 

 

4、获取当前选中项的text

 

    $(".selector").find("option:selected").text();

 

 

    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

 

 

 

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

 

如:$(".selector1").change(function(){

 

     // 先清空第二个

 

      $(".selector2").empty();

 

     // 实际的应用中,这里的option一般都是用循环生成多个了

 

      var option = $("<option>").val(1).text("pxx");

 

      $(".selector2").append(option);

    //或者  $("#shi").append("<option value='省'>省名称</option>");

});

 

分享到:
评论

相关推荐

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

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

    [转]Jquery操作select 收藏

    文件"jQuery-Select-bynet.htm"可能就是一个示例代码或插件的文档,它可能包含了更高级的select操作示例,如模拟多级联动下拉菜单或者自定义的下拉列表样式。 总的来说,掌握jQuery操作select的方法对于前端开发来...

    jquery select2组件

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

    jquery select

    - **图片资源**:`images`目录下的图片文件可能用于美化或增强jQuery Select操作的元素效果。 6. **实际应用** 使用jQuery Select可以实现各种常见的DOM操作,例如改变元素的样式、内容,添加或移除类,响应用户...

    jquery select操作的日期联动实现代码

    【jQuery select操作与日期联动实现】\n\n在网页开发中,经常需要处理用户界面的交互,例如在选择某一选项后自动更新相关的日期输入。这种功能通常被称为“日期联动”。在jQuery库的支持下,实现这样的功能变得相对...

    一個灰常好用的jquery操作select插件

    《一个实用的jQuery Select操作插件详解》 在Web开发中,HTML的`&lt;select&gt;`元素经常被用于创建下拉菜单,但其默认样式和功能往往无法满足开发者和用户的需求。这时,jQuery插件就发挥了重要作用,它们可以增强`...

    jQuery Select下拉框美化特效.zip

    "jQuery Select下拉框美化特效"就是为了提升用户体验,将原本朴素的Select元素转化为具有视觉吸引力的组件。 该特效主要基于JavaScript库jQuery实现,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    jquery select列表选择框选中美化效果源码

    总的来说,通过使用jQuery和相关的插件,我们可以轻松地为传统的HTML `select`元素添加丰富的视觉和交互效果,提升用户在网页中的操作体验。在研究并理解源码后,开发者可以根据自己的需求对代码进行调整和定制,以...

    jQuery select下拉框美化代码.zip

    首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在这个项目中,`jquery.1.10.2.min.js` 是基础,它提供了用于实现下拉框美化所需的各种功能和方法。 美化HTML...

    jquery实现select互斥联动

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

    jQuery select操作控制方法小结

    在现代网页设计中,JavaScript库jQuery极大地方便了开发人员对网页元素的操作。特别是在处理HTML的SELECT元素时,jQuery提供了一系列简单有效的方法来控制select下拉列表,包括获取选中项的文本和值、设置选中项、...

    JQuery操作select

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

    jQuery手机下拉框select

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

    jquery select美化插件

    首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在“jquery select美化插件”这个主题中,我们主要关注的是如何利用jQuery扩展原生的`&lt;select&gt;`元素,使其外观和交互更加...

    jQuery实现select样式美化 jQselect.js

    通过jQuery,开发者可以编写更简洁、高效的代码来处理DOM操作,这使得对`&lt;select&gt;`的美化变得更加容易。 jQselect.js这个脚本就是针对`&lt;select&gt;`元素的美化插件,它能够将标准的下拉选择框转换为具有自定义样式的...

    80、jquery select下拉框美化代码

    在IT行业中,前端开发是至关重要的一环,而jQuery作为一个强大的JavaScript库,极大地简化了DOM操作,使得网页交互变得更加便捷和美观。本知识点聚焦于"80、jquery select下拉框美化代码",主要讨论如何使用jQuery来...

    jquery 超级select插件 v4.0版本

    《jQuery超级Select插件v4.0版本详解》 在Web开发中,下拉选择框(Select)是最常见的表单元素之一,但在某些场景下,普通的Select可能无法满足复杂的交互需求,例如多选、搜索过滤、自定义样式等。这时,jQuery...

    Jquery操作Select option整理

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

    jquery select 样式框架

    - 添加过渡动画,使用户在操作select元素时有更流畅的体验。 - 支持多级下拉菜单,便于处理复杂的选项结构。 - 可以通过JavaScript API或CSS类进行进一步的定制和扩展。 总的来说,"jQuery Select样式框架"为开发者...

Global site tag (gtag.js) - Google Analytics