`
ygsilence
  • 浏览: 337307 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用jquery操作select下拉列表框(转)

    博客分类:
  • JS
阅读更多

例: <select id="sltList" name="list">

< option value = "1" > 张三 </ option >   

< option value = "2" > 李四 </ option >   

</ select >   

// 获取当前选中的option值   

$( '#sltList' ).val()      

//获取当前选中项的文本   

$( '#sltList option[@selected]' ).text(); // 获取当前选中的option, text为文本, val则是option的值了

或 var item = $("select[@name= list] option[@selected]").text();

//设置文本为当前选中项

$("#sltList option[@selected]").attr("text",'张三');

//设置select下拉框的第二个元素为当前选中值
   $('#sltList')[0].selectedIndex = 1;

//设置value=1的项目为当前选中项
$("#sltList").attr("value",'1');
   $('#sltList').val('1');

//添加下拉框的option

$("<option value='3'>王五</option><option value='4'>赵六</option>").appendTo("#sltList")

//清空下拉框

$("sltList").empty();

例:

//改变时的事件

$("#testSelect").change(function(){ //事件發生
jQuery('option:selected', this).each(function(){ //印出選到多個值
alert(this.value);   
});
});

$("#childTypeResult").append(htmlStr); //是在此ID标签后增加htmlStr的值.

$("#childTypeResult").html(htmlStr); 是修改此ID的值为htmlStr的值.

分享到:
评论

相关推荐

    Jquery实现select下拉列表根据radio选项级联

    本主题将探讨如何利用jQuery实现一个特定的功能——“select下拉列表根据radio选项级联”。这个功能常用于创建动态表单,其中,用户选择一个radio按钮后,相关的select下拉列表会自动更新其选项,以提供与所选radio...

    jquery自动滚动下拉列表框.rar

    本篇文章将深入探讨如何利用jQuery实现自动滚动下拉列表框这一常见的JS特效,特别是针对“选项卡TAB”的交互优化。 一、jQuery基础 jQuery是一个JavaScript库,它简化了JavaScript的DOM操作、事件处理以及动画效果...

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    jQuery ajax JSON 下拉列表框级联

    本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**:jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中,jQuery用于...

    利用jquery操作select下拉列表框的代码

    通过使用jQuery这个强大的JavaScript库,我们可以更加便捷地操作select下拉列表框。在本文中,我们将通过实例来探讨如何使用jQuery来操作select元素,包括获取和设置选中的值、动态添加和清空选项等。 首先,我们要...

    使用JQuery左右移动下拉列表框中的值

    标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表(select元素),特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...

    jquery自动滚动下拉列表框.zip

    总结来说,"jquery自动滚动下拉列表框.zip"这个项目展示了如何利用jQuery的动画功能和事件处理来增强HTML的下拉列表框,创建出具有自动滚动效果的交互式界面。这不仅提升了用户体验,也展示了前端开发者对jQuery库的...

    jquery搜索栏select下拉选择框

    本主题聚焦于“jquery搜索栏select下拉选择框”,这是一个常见的交互元素,用于提供用户友好的搜索体验。在网页的搜索功能中,用户通常需要指定搜索范围,如按类别、日期或其他特定条件进行筛选。这种情况下,一个...

    jQuery模拟Select下拉菜单选中添加代码.zip

    在这个项目中,我们主要利用jQuery的事件处理、DOM操作以及动画效果等功能,来构建一个可定制的下拉菜单。通过模拟Select,我们可以自由控制下拉列表的显示、隐藏,甚至可以实现动态加载和异步更新。 首先,`index....

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`&lt;select&gt;`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...

    jQuery 仿 Select 下拉

    "jQuery 仿 Select 下拉"就是一个常见的实践,它利用jQuery库和HTML、CSS来模拟原生的Select元素,同时增加更多的交互性和自定义样式。下面将详细介绍这个主题的相关知识点。 首先,jQuery是一个强大的JavaScript库...

    jQuery树形插件下拉列表选择框.zip

    本文将详细探讨jQuery树形插件在下拉列表选择框中的应用,以及如何利用它来提升用户的操作体验。 首先,"jQuery树形插件下拉列表选择框"是一种创新的UI设计,它将传统的下拉列表与树形结构相结合,使用户可以在层级...

    一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

    在本篇教程中,我们将深入探讨如何利用jQuery库来实现一个功能丰富的下拉列表左右选择交互。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得前端开发变得更加高效和便捷。本章节...

    jQuery树形下拉列表选择框代码.zip

    《jQuery树形下拉列表选择框代码解析与应用》 在网页开发中,为了提高用户体验,我们经常需要设计出交互性更强的元素,比如树形下拉列表选择框。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,使得...

    jquery如何自定义select下拉样式

    在网页开发中,jQuery是一个...通过以上步骤,我们可以利用jQuery和Select2插件轻松实现自定义的`&lt;select&gt;`下拉样式,提升网页的视觉效果和交互体验。在实际项目中,根据需求选择合适的插件和配置,以达到最佳效果。

    jQuery分类下拉搜索框代码.zip

    本文将详细解析如何利用jQuery技术构建一个分类下拉搜索框,以帮助用户快速找到所需的商品或信息。这个功能是基于jQuery 3.3.1版本的轻量级JavaScript库实现的。 首先,jQuery库为开发者提供了丰富的DOM操作、事件...

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

    本主题聚焦于“jquery select列表选择框选中美化效果源码”,这是一个关于利用jQuery来增强HTML `&lt;select&gt;` 元素外观和交互性的技术实践。 在标准HTML中,`&lt;select&gt;`元素用于创建下拉列表,但其样式和交互性往往...

    jquery下拉列表插件

    而“jQuery下拉列表插件”就是利用jQuery来增强HTML原生的`&lt;select&gt;`元素,提供更丰富的交互性和自定义样式。这个插件名为“selectBox”,它旨在模仿并扩展下拉列表的功能,为用户带来更好的使用体验。 首先,原生...

Global site tag (gtag.js) - Google Analytics