JS 实现下拉框回显

学习内容：

需求

用 JS 实现下拉框回显

实现代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>下拉框回显</title>

    <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>

    <script>

        function echo() {

            // eq() 方法将匹配元素集缩减值指定 index 上的一个，整数，指示元素的位置（最小为 0）

            // $('#s1').val("3");

            $('#s1 > option:eq(2)').prop('selected', true);

        }

    </script>

</head>

<body>

<select id="s1">

    <option value="1">选项1</option>

    <option value="2">选项2</option>

    <option value="3">选项3</option>

    <option value="4">选项4</option>

    <option value="5">选项5</option>

</select>

<br/>

<input type="button" value="回显第3个选项" onclick="echo();"/><br/>

</body>

</html>

总结：

以上就是用 JS 实现下拉框回显，代码的简单实现了，仅供参考，欢迎讨论交流。

JS 实现下拉框回显的更多相关文章

  1. Layui：select下拉框回显

    一..需求场景分析 基于Thymeleaf模板下的layui下选框回显. 二.获得一个Layui标配的下拉框,我们需要在html中填写的内容如下 <div class="layui-f ...

  2. vue 运用ElementUI,做select下拉框回显

    第一.加载的顺序,应该先加载下拉框要选择的数据,然后在通过编辑查询数据后回显. 第二.要保证select下拉的ID和v-model里边的id保持一致. 第三.elementUI就会自动的将数据回显了. ...

  3. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  4. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  5. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  6. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  7. JS实现下拉框选中不同的项，对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

  8. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  9. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

随机推荐

  1. ASP.NET Core 6框架揭秘实例演示[19]：数据加解密与哈希

    数据保护(Data Protection)框架旨在解决数据在传输与持久化存储过程中的一致性(Integrity)和机密性(confidentiality)问题,前者用于检验接收到的数据是否经过篡改,后 ...

  2. java中的异常(Exception)

    基本概念 将程序执行中发生的不正常的情况称为"异常".开发中的语法错误和逻辑错误不是异常 执行过程中的异常事件可分为两大类 错误(Error):Java虚拟机无法解决的严重问题.例 ...

  3. MySQL 中如何归档数据

    归档,在 MySQL 中,是一个相对高频的操作. 它通常涉及以下两个动作: 迁移.将数据从业务实例迁移到归档实例. 删除.从业务实例中删除已迁移的数据. 在处理类似需求时,都是开发童鞋提单给 DBA, ...

  4. Swagger 接口文档

    目录 Swagger 介绍 Swagger 依赖 SpringBoot 集成 Swagger 配置类 常用注解 效果示例 Swagger 介绍 Swagger UI 允许任何人(无论是开发团队还是最终 ...

  5. QQ聊天记录快速迁移

    QQ聊天记录快速迁移 在工作中大家经常会用到QQ来沟通,但是很多时候在其它设备上登录QQ就无法查看到之前的聊天记录和图片,这是因为电脑上的QQ聊天记录一般都是保存在电脑本地硬盘里,所以我们在换设备登录 ...

  6. Python可变参数*args和**kwargs

    本文我们将通过示例了解 Python函数的可变参数*args和 **kwargs的用法. 知识预备:Python 函数和 Python 函数参数 在Python编程中,我们定义一个函数来生成执行类似操 ...

  7. Mybatis结果集ResultMap映射

    基本使用: 解决属性名和数据库字段名不一致的问题 <resultMap id="user" type="com.guan.bean.UserBean"&g ...

  8. Ubuntu 16.04 更改系统语言为简体中文

    镜像下载.域名解析.时间同步请点击阿里巴巴开源镜像站 一.安装时报错 原因:以访客的身份进入的会报错,改为管理员进入即可. ps:有时候往往一点小细节也会造成大问题,但是我们要善于排错. 注:可以看到 ...

  9. Linux安装docker 配置Apache

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 要求: 安装docker yum install docker -y 将centos镜像导入云主机 将centos镜像导入docker docke ...

  10. 绕过CDN找到⽬标站点真实IP

    一.判断目标网站是否使用CDN 在渗透测试中,如果连真实 IP 都没有找到的话,相当于连门都没有找到.所以,如何验证目标网站是否使用了 CDN 呢? 1.多地 ping 法(一般情况下使用多地 pin ...