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. Hadoop原生对象存储Ozone

    Hadoop 社区推出了新一代分布式Key-value对象存储系统 Ozone,同时提供对象和文件访问的接口,从构架上解决了长久以来困扰HDFS的小文件问题.本文作为Ozone系列文章的第一篇,抛个砖 ...

  2. 二级py--day6数据库设计基础

    二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...

  3. mysql命令flush privileges命令

    修改一个用户的密码,命令如下 mysql> update user set password=password('新密码') where user='用户名'; 执行后报错: ERROR 105 ...

  4. 云图说｜DRS数据对比——带您随时观测数据一致性

    摘要:数据迁移过程中,如何保证数据不丢失,确保数据的一致性? 本文分享自华为云社区<[云图说]第226期 DRS数据对比--带您随时观测数据一致性>,作者:阅识风云 . 数据迁移过程中,如 ...

  5. Redis常用命令代码实例集合

    //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $redis->auth('12345 ...

  6. php 23种设计模型 - 代理模式

    代理模式(Proxy) 在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 介 ...

  7. 基于selenium实现河海大学自动健康打卡

    0.每日健康打卡有点烦 1.所用方法:selenium:需要下载响应浏览器的webdriver 2.注意事项,我感觉唯一要注意的就是页面跳转以后应该怎么操作了(那个时候困扰了我好几天) 3.相应代码: ...

  8. 使用Typora做笔记

    本文旨在分享使用Typora做笔记的一些心得 一.介绍 为什么要用Typora 作为一个程序员,在学习过程中打交道的不单单是文字,还有各种语言的代码块和公式,以及一些简单的流程图和思维导图(就目前而言 ...

  9. js 中的值类型和引用类型

    javascript中值类型(基本类型):number,string,bool,undefined,null(这5种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值) 引用类型:对象(Ob ...

  10. 6月11日 python学习总结 框架理论

    Web框架本质及第一个Django实例   Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web ...