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

时间：2022-08-29 23:14:25

使用 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. django的html模板中获取字典的值

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

  7. 在java中获取attr的值

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

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

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

  9. coding&plus;&plus;：使用 javascript 在html中获取url参数

    函数处理定义如下: < script type = "text/javascript" > function $G() { var Url = top.window.l ...

随机推荐

  1. &period;net自定义WebService WSDL

    最近工作需要向第三方提供一个WebService服务,坑爹的是第三方背景牛X,我方提供的服务必须完全遵照其客户端方预先定义好了的接口,一个符号都不允许修改. .net平台编写的WebService由于 ...

  2. 《Linux内核分析》第六周 进程的描述与创建

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK SIX(3 ...

  3. CentOS7 MongoDB安裝

    查看MongoDB的最新版官方下载地址: https://www.mongodb.com/download-center#community 使用wget命令下载安装包 ? 1 wget https: ...

  4. &lbrack;原创&rsqb;使用benchmarksql和pgbench对PostgreSQL Plus Advanced Server进行性能测试

    一.测试环境 benchmarksql version:4.0.8 rhel 6.3 vmware esxi 二.理解benchmarksql性能测试原理TPC-C 1.理解TPC-C TPC-C模拟 ...

  5. 树莓派编译C&plus;&plus;

    首次研究树莓派~  安装的Linux 编译C++时,就出现了问题,未定义!!无法识别 查了原因是没有安装  build-essential 解决方法 sudo apt-get install buil ...

  6. SpringMVC常用配置&lpar;二&rpar;&comma;最简洁的配置实现文件上传

    Spring.SpringMVC持续介绍中,基础配置前面已经介绍了很多,如果小伙伴们还不熟悉可以参考这几篇文章: 1.Spring基础配置 2.Spring常用配置 3.Spring常用配置(二) 4 ...

  7. js 对象与json的转化

    1.将对象转换为JSON格式字符串 JSON.stringify(object) 2.将JSON字符串转换为对象 JSON.parse(jsonString);

  8. 我的第一个爬虫程序：利用Python抓取网页上的信息

    题外话 我第一次听说Python是在大二的时候,那个时候C语言都没有学好,于是就没有心思学其他的编程语言.现在,我的毕业设计要用到爬虫技术,在网上搜索了一下,Python语言在爬虫技术这方面获得一致好 ...

  9. git worktree 是什么及其使用场景

    先上总结: 在git worktree出现之前, git切换分支前后的文件都只存在在当前文件夹下, git worktree出现之后, 我们可以将分支切换到其他文件夹下 比如如果你的项目有很多个版本分 ...

  10. poj 3903 poj 2533 （LIS模板题）

    pi1 < pi2 < ... < pik, with i1 < i2 < ... < ik. Sample Input 6 5 2 1 4 5 3 3 1 1 1 ...

相关文章