使用 JavaScript 在下拉列表中获取选定的值

演示Demo 使用 JavaScript 在下拉列表中获取选定的值？

<!DOCTYPE html>

<html>

<head>

    <title>使用JavaScript在下拉列表中获取选定的值</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

</head>

<body>

    <div style="text-align: center;margin: 10px;">

        <div class="alert alert-success" role="alert">

            使用JavaScript在下拉列表中获取选定的值？

        </div>

        <div class="input-group mb-3" style="width: 450px;">

            <div class="input-group-prepend">

                <label class="input-group-text" for="inputGroupSelect">Options</label>

            </div>

            <select class="custom-select" id="inputGroupSelect" onchange="getSelectValue(this);">

                <option value="">Choose...</option>

                <option value="1">One</option>

                <option value="2">Two</option>

                <option value="3">Three</option>

            </select>

        </div>

    </div>

</body>

<script type="text/javascript">

$(function() {

    var e = document.getElementById("inputGroupSelect");

    e.options[2].selected = true;

    // set_select_checked('inputGroupSelect',3);

    var strUserValue = e.options[e.selectedIndex].value; // strUserValue 得到的结果使 2

    var strUserText = e.options[e.selectedIndex].text; // strUserText 得到的结果使 Two

    console.log('下拉框默认选中的值');

    console.log('strUserValue: ' + strUserValue);

    console.log('strUserText: ' + strUserText);

    console.log('-------------------------------------------');

})

/**

 * 设置select控件选中

 * @param selectId select的id值

 * @param checkValue 选中option的值

 * 参考：https://blog.csdn.net/woaifen3344/article/details/56018640?fps=1&locationNum=2

 */

function set_select_checked(selectId, checkValue) {

    var select = document.getElementById(selectId);

    for (var i = 0; i < select.options.length; i++) {

        if (select.options[i].value == checkValue) {

            select.options[i].selected = true;

            break;

        }

    }

}

function getSelectValue(selectId) {

    var e = selectId;

    var strUserValue = e.options[e.selectedIndex].value; // strUserValue 得到的是下拉框的值

    var strUserText = e.options[e.selectedIndex].text; // strUserText 得到的是下拉框的文本内容

    console.log('strUserValue: ' + strUserValue);

    console.log('strUserText: ' + strUserText);

    console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~');

}

</script>

</html>

参考资料

使用 JavaScript 在下拉列表中获取选定的值的更多相关文章

  1. GridView控件RowDataBound事件中获取列字段值的几种途径

    前台: <asp:TemplateField HeaderText="充值总额|账号余额"> <ItemTemplate> <asp:Label ID ...

  2. JAVA中获取文件MD5值的四种方法

    JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...

  3. MVC教程二：从控制器中获取URL的值

    一.从控制器中获取URL的值有三种方式: 1.使用Request.QueryString[] 例如: string value = Request.QueryString["BookId&q ...

  4. jeecg中datagrid中获取选定行的字段值

    datagrid代码如下: <t:datagrid name="orderMainList" checkbox="true" pagination=&qu ...

  5. ExtJs 中获取 radiobutton 的值

    ExtJs中使用radiobutton,想在ExtJs本身代码中(注意,不是在后台喔)获取 radioButton 的值,居然发现很难,无从下手的感觉.后来在网上寻寻觅觅,痛苦摸索之后,真是大跌眼镜. ...

  6. js技术之如何在JS中获取input的值

    在JavaScript中获取input元素value的值: 方法一:var variations_number = $("#input的id名").val(); 1 <!DO ...

  7. django的html模板中获取字典的值

    在django的html模板中获取字典中的值应当直接使用 字典.[key] 的方式 {% for i in lists %} <li id="{{i.id}}" class ...

  8. 在java中获取attr的值

    首先说如何获取已经在style里面定义好的attr的值,以colorPrimary为例: TypedValue value = new TypedValue(); mContext.getTheme( ...

  9. javascript和jquery中获取列表的索引

    网页中的图片预览一般都需要获取图片列表的索引,或则图片对应的标签的索引,以此达到点击相应的标签获取索引,显示相应的图片 列表有很多种表达的方式,一种是 <ul> <li>苹果& ...

随机推荐

  1. 14.Android UiAutomator 图像处理

    一.BitMap介绍 1.图像使用场景 1)效果类截图 2)不可见的组件图像对比 3)失败与异常截图 4)利用图像判断组件 2.部分API简单说明 API 说明 compress 压缩图片 copy ...

  2. socket传送文件

    一.文件传送步骤 我们要利用socket来实现下载一个文件,该如何操作呢? 服务端: 读取文件名 判断文件是否存在 检测文件大小(用于和客户端对比判断文件是否传送完毕) 发送文件大小给客户端 等待客户 ...

  3. SpringCloud学习(2)——Rest微服务案例

    创建父工程: microservicecloud  创建公共模块api:microservicecloudapi SQL脚本: 此学习路线总共创建3个库, 分别为clouddb01, clouddb0 ...

  4. Chrome工具使用

    (1) Chrome插件的使用 本来还想说FQ了,结果实验半天没成功,最后才知道公司已经邮件通知了,郁闷,FQ后我把我的插件重新装了一遍,觉得好像又懂了好多,记载下来我装的一些东西和有关PostMan ...

  5. [Luogu 2024] 食物链

    [Luogu 2024] 食物链 几句随感 我依稀记得联赛前本来想做这题的时候. 当年啊弱到题目与标签就令我望而生畏. 还有翻阅很多遍那现在已经被遗弃的博客. 看到题解中「三倍数组」的字眼就怕难而放弃 ...

  6. 【转】 虚拟机Linux不能上网简单有效的解决办法（NAT模式下）

    前提条件: a. 确保VMware Network Adapter for VMnet8 处于启用状态,这个是NAT网络模式要用的虚拟网卡.注意这个网卡的IP地址,不需要做手动设置 b. 确保 VMw ...

  7. Date、String、Calendar相互转化

    Date是在Jdk1.0出现的专门用来处理时间的类,但是由于Date在国际化方面存在限制,在Jdk1.1推出Calendar,现在Date的很多方法都已经过时,都迁移到Calendar上. 1.Dat ...

  8. 【洛谷 P2553】 [AHOI2001]多项式乘法（FFT）

    题目链接 简单处理一下输入,\(fft\)模板题. #include <cstdio> #include <cmath> #include <algorithm> ...

  9. SMB MS17-010 利用（CVE-2017-0144 ）

    exploit-db : https://www.exploit-db.com/exploits/42315/ 该漏洞的影响版本很广泛:Microsoft Windows Windows 7/8.1/ ...

  10. 码源中国.gitignore忽略文件配置

    码源中国.gitignore忽略文件配置 ## Ignore Visual Studio temporary files, build results, and ## files generated ...