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. MM32F0140 UART1中断接收和UART1中断发送

    目录: 1.MM32F0140简介 2.初始化MM32F0140 UART1和NVIC中断 3.编写MM32F0140 UART1使能中断发送函数 4.编写MM32F0140 UART1中断接收和中断 ...

  2. 『现学现忘』Docker基础 — 16、Docker中的基本概念和底层原理

    目录 1.Docker的底层原理 2.Docker中常用的基本概念 3.run命令的运行流程 4.为什么Docker比VM快 Docker架构图: 我们依照Docker架构图进行Docker基础概念的 ...

  3. 分页PHP

    <?php//1.连接数据库$link = mysqli_connect('127.0.0.1','root','root','1906');//2.设置字符集mysqli_set_charse ...

  4. php 23种设计模型 - 建造者模式

    建造者模式(Builder) 建造者模式(Builder Pattern)使用多个简单的对象一步一步构建成一个复杂的对象.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 一个 Bu ...

  5. java基础复习记录

    java基础复习记录(数组.对象.异常) 数组 数组的定义 数组是相同类型数据的有序集合.如:篮球队就是一个数组,队员球服上有号码,相当于索引.通过某一个的某一个号码来确认是某一个队员.数组中索引从0 ...

  6. 【1024打卡】C++字符串的输出((c语言风格)

    c++字符串输出(c语言风格) 文章目录 c++字符串输出(c语言风格) 杂记 代码 杂记 今天程序设计竞赛白给了,果然还是太弱了,y总带带我TAT ┭┮﹏┭┮1024快乐 代码 c语言学习 #inc ...

  7. 关于OAuth2.0 Authorization Code + PKCE flow在原生客户端(Native App)下集成的一点思考

    写在前面 前几天看了园友的一篇文章被广泛使用的OAuth2.0的密码模式已经废了,放弃吧 被再次提起: Implicit Flow Password Grant,均已被标记为Legacy,且OAuth ...

  8. 网络监听FTP明文口令实验

    一. 开启环境 1.登录FTP服务器. 2.启动FTP服务器 (1)打开FTP服务器.点击最左面绿色按钮,启动ftp服务器. (2)可以看到以下变化:ftp服务器启动.显示"FTP服务在线& ...

  9. badusb

    ​badusb介绍 BadUSB是利用伪造HID设备执行攻击载荷的一种攻击方式.HID(Human InterfaceDevice)设备通常指的就是键盘鼠标等与人交互的设备,用户插入BadUSB,就会 ...

  10. git 多人在同一分支上迭代开发时，如何保证分支提交历史保持线性

    背景 最近我们组几个同事都投入到了一个新项目,互相之间的功能耦合比较紧密,因此,是打算从master上新拉一个分支,可以理解为我们几个人的开发分支,以develop代替. 一开始,我们是打算像svn那 ...