首页 > 其他分享 >使用jQuery获取下拉菜单项的选定值

使用jQuery获取下拉菜单项的选定值

时间:2023-09-04 22:22:34浏览次数:60  
标签:jQuery dropDownId 选定 val text selected selID 下拉菜单

对于单个select dom元素,获取当前选择的值:

$('#dropDownId').val();

获取当前选定的文本:

$('#dropDownId :selected').text();
 

您是否为选择元素提供了id?

<select id='dropDownId'> ...

你的第一句话应该有用!

 
var value = $('#dropDownId:selected').text()

应该工作得很好,请看这个例子:

$(文档)时函数(){ $ (' # button1 ') .click(函数(){ 警报($ #组合:选择)。text ()); }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <选择id = "组合" > <option value="1">Test 1</option> . </option> . <option value="2">Test 2</option> . </option> . < /选择> <input id="button1" type="button" value="点击!"/>

 

试试这个jQuery,

$("#ddlid option:selected").text();

或者这个javascript,

 var selID=document.getElementById("ddlid");
 var text=selID.options[selID.selectedIndex].text;

如果你需要访问值而不是文本,那么尝试使用val()方法而不是text()。

看看下面的小提琴链接。

 

这样就可以了

$('#dropDownId').val();
 

试试这个

$("#yourDropdown option:selected").text();
 

在html中为你的下拉控件生成的id是动态的。因此使用完整的id $('ct100_<您的控件id>').val()。它会起作用的。

 

还有一个经过测试的例子:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
 

来源 https://www.lum114.com/post/E3Ag6PnXO5

 

标签:jQuery,dropDownId,选定,val,text,selected,selID,下拉菜单
From: https://www.cnblogs.com/huaface/p/17678253.html

相关文章

  • 爬虫配置必备:JQuery|querySelector|Cheerio DOM节点选择干货集
    作者:fbysss前言网页爬取,是一项既费脑子又繁琐的工作。因为网页格式不一,很难完全靠机器自动识别。通常,我们可以采用css选择器来选取DOM节点,从整个网页中抽取我们需要的内容。前端大家最熟悉的应该是JQuery了。如果JQuery不好用,可以直接使用原生的document.querySelectorAll,现在的浏......
  • Unity UGUI的Dropdown(下拉菜单)组件的介绍及使用
    UnityUGUI的Dropdown(下拉菜单)组件的介绍及使用1.什么是Dropdown组件?Dropdown(下拉菜单)是UnityUGUI中的一个常用组件,用于在用户点击或选择时显示一个下拉菜单,提供多个选项供用户选择。2.Dropdown组件的工作原理Dropdown组件由两部分组成:一个可点击的按钮和一个下拉菜单。当......
  • disable/enable an elment using jQuery & JS
    1.JS:  2.jQuery: 参考网址:https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-buttonhttps://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery ......
  • 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
    [导读] 一摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式其中DOM属性和元素属性的区分值得大家学习二前言通过前面几章我们已经能够完全控制jQuery包装集了,无论是通过选择器选取对象,或者从包一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS......
  • 从零开始学习jQuery (六) AJAX快餐
    [导读] 一摘要本系列文章将带您进入jQuery的精彩世界,其中有很多作者具体的使用经验和解决方案,即使你会使用jQuery也能在阅读中发现些许秘籍本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能统一所有开发人员使一.摘要本系列文章将带您进入jQuery的精彩世界,其中有很多......
  • 从零开始学习jQuery (五) 事件与事件对象
    [导读] 一摘要事件是脚本编程的灵魂所以本章内容也是jQuery学习的重点本文将对jQuery中的事件处理以及事件对象进行详细的讲解二前言本篇文章是至今为止本系列内容最多的一篇,足以可见其重要性大家反映要多一.摘要事件是脚本编程的灵魂.所以本章内容也是jQuery学习的重......
  • Jquery的load()方法在IE中不运行
    在ie中load()方法去是拿缓存的数据而不是向服务器拿  在script开头加上这句js 让ie不读取缓存就好 如果只是一个方法用到load()那就在load()之前加上这句不需要全局设置 $.ajaxSetup({cache:false});......
  • jquery 过滤器~查找方法
    过滤方法,指的是对所选元素进一步地筛选。查找方法,主要是以当前所选元素为基点,找到这个元素的父元素、子元素或兄弟元素。在jQuery中,对于查找方法,我们可以分为以下3种情况。(1)查找祖先元素。(2)查找后代元素。(3)查找兄弟元素。1.查找祖先元素在jQuery中,如果想要查找当前元素的......
  • bootstrap页面集成jquery异步请求
    jquery技术是对原生js技术的封装和优化,实现页面上的功能能独立的运行和提交给后台程序,相比之前的用表单整体提交数据可以提高系统的性能,加快响应速度。要在项目中使用jquery必须先引入相关的js脚本,在项目中导入这些js脚本文件:导入后接下来再进行相关技术的操作。实现效果,在一个页面......
  • 04 jQuery遍历器
    04jQuery遍历器如果jQuery一次性选择了很多元素节点.而我们又希望能拿到每一个元素中的相关信息.此时可以考虑用jQuery的遍历器来完成对元素的循环遍历。例如:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scripts......