`

jquery及原生js获取select下拉框选中的值示例

 
阅读更多
有一id=test的下拉框,怎么拿到选中的那个值呢?本文将采用javascript原生的方法及jquery方法(前提是已经加载了jquery库)来简单实现下
现在有一id=test的下拉框,怎么拿到选中的那个值呢? 

分别使用javascript原生的方法和jquery方法 
复制代码代码如下:
<select id="test" name=""> 
<option value="1">text1</option> 
<option value="2">text2</option> 
<option value="3">脚本学堂</option> 
</select> 


一:javascript原生的方法 

1:拿到select对象: var myselect=document.getElementById("test"); 

2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 

3:拿到选中项options的value: myselect.options[index].value; 

4:拿到选中项options的text: myselect.options[index].text; 

二:jquery方法(前提是已经加载了jquery库) 

1:var options=$("#test option:selected"); //获取选中的项 

2:alert(options.val()); //拿到选中项的值 

3:alert(options.text()); //拿到选中项的文本
分享到:
评论

相关推荐

    纯js超酷select下拉框美化插件

    **纯JS超酷Select下拉框美化插件——TastySelect** 在网页设计中,Select下拉框作为数据选择的常见元素,其样式通常由浏览器默认控制,这往往不符合现代网页设计的美观需求。为了解决这个问题,开发者们创造了各种...

    select下拉框添加搜索功能

    这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能,一般有两种常见方法:一种是原生HTML和JavaScript的实现,另一种是借助第三方库,如本例中的`jquery.editable-select`。...

    jQuery select下拉框单选和多选插件

    **jQuery select下拉框单选和多选插件** 在Web开发中,下拉框(select)是常用的一种用户交互元素,它用于提供多个选项供用户选择。然而,原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...

    jQuery美化select下拉框

    在提供的压缩包文件“beautify select box”中,可能包含了示例代码、CSS样式和jQuery插件文件,你可以根据这些资源进行实践和学习,进一步理解并掌握jQuery美化select下拉框的技术。在实际项目中,记得根据具体需求...

    Jquery结合jQueryUI实现的select下拉框美化以及功能性禁用的效果源码.zip

    本文将详细介绍如何利用jQuery和jQuery UI实现select下拉框的美化和功能性禁用效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务。jQuery UI则基于jQuery,提供...

    jQuery实现select下拉框样式美化效果

    本资源主要介绍如何使用jQuery来实现select下拉框的样式美化效果。 首先,我们需要引入jQuery库。jQuery的最新版本可以在官方网站(https://jquery.com/download/)下载,也可以通过CDN链接快速引入,如: ```html ...

    JS中Select下拉列表类(支持输入模糊查询)功能

    JS中Select下拉列表类支持输入模糊查询功能的知识点主要包括以下几个方面: 1. HTML结构设计:实现输入模糊查询功能的下拉列表通常包含一个输入框和一个下拉框。输入框用于用户输入查询字符,下拉框则是提供选项供...

    jQuery Select下拉框美化代码.zip

    综上所述,"jQuery Select下拉框美化代码.zip"提供的示例是一个典型的jQuery Select美化实践,通过HTML、CSS和JavaScript的协同工作,实现了美观且易用的下拉选择框。对于开发者来说,理解并掌握这一技术,不仅可以...

    jquery select下拉框美化代码.zip

    "jquery select下拉框美化代码.zip" 提供了一种解决方案,通过结合jQuery库来增强和美化下拉框的外观和交互效果,使其更加吸引用户。 这个代码包可能包含以下几个部分: 1. **jQuery库**:jQuery是一个广泛使用的...

    jQuery实现的select下拉框多选菜单效果插件.zip

    6. **获取选中值**:通过jQuery选择器和属性操作,可以轻松获取用户当前选中的值。 ```javascript var selectedValues = $('#mySelect').val(); ``` 总的来说,这个jQuery插件旨在提供一个易于使用、可定制化的...

    基于jquery实现的select美化自定义下拉框样式.zip

    7. **文件名称列表**:"132687010973296057"可能是实际的JavaScript文件名或压缩包内的一个唯一标识符,实际的内容可能包括HTML示例文件、CSS样式文件、jQuery插件的JS文件以及可能的图片资源等。 8. **应用实践**...

    jquery select带筛选下拉框代码.zip

    在使用这个插件时,开发者需要将jQuery库和Bootstrap的CSS及JS文件引入到他们的项目中。然后,通过在HTML中添加特定的类名或属性,以及调用相应的jQuery方法,来激活这个增强型下拉框。在项目中,可能还需要根据实际...

    jQuery模拟select下拉框三级城市联动代码.zip

    然而,原生的select下拉框在样式定制和交互性方面存在局限,因此开发者常常使用jQuery来模拟自定义的下拉框,以便获得更好的用户体验和设计自由度。 这个项目的核心在于实现城市联动功能。当用户在第一级(省份)中...

    基于jquery最完美的select下拉框美化.zip

    "基于jquery最完美的select下拉框美化.zip"就是一个针对这一需求的解决方案,它结合了jQuery的强大功能,提供了一种优雅的方式来改善Select的视觉效果。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、...

    jQuery Select下拉框美化特效.zip

    这时,我们可以借助JavaScript库,如jQuery,以及CSS来实现Select下拉框的美化特效,提升用户体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画等功能。在这个“jQuery Select下拉框...

    select下拉框支持搜索并可多选

    在网页开发中,"select下拉框支持搜索并可多选" 是一个常见的交互功能,它极大地提高了用户体验,尤其在面对大量选项时。这个功能通常通过JavaScript库来实现,结合CSS进行样式定制,以达到美观且实用的效果。在这个...

    jQuery select下拉框样式美化插件.zip

    《jQuery Select下拉框样式美化插件详解及应用》 在网页设计中,下拉框(Select)作为常见的数据选择控件,其样式往往显得较为单一,无法满足设计师们追求美观与个性化的需求。jQuery,这个强大的JavaScript库,为...

    jQuery select下拉框美化插件.zip

    "jQuery select下拉框美化插件.zip"是一个专为解决这个问题而设计的工具,它利用jQuery和jQuery UI库来增强原生HTML `select` 元素的样式和功能,使其更符合现代网页设计的标准。 首先,jQuery是一个轻量级的...

Global site tag (gtag.js) - Google Analytics