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. 对element-ui的table组件的二次封装

    首先,使用过element-ui的table组建的同学都知道,每次使用的时候表头字段都要一个一个的去写,写起来很麻烦,既不美观又浪费时间,基于以上原因,对table组件进行二次封装,使我们在使用的时候 ...

  2. ElasticSearch常用查询命令-kibana中使用

    目录 初学ES 只创建索引(表) 1. 创建 2.创建好后查看索引结构 添加文档(数据) 查看文档(数据) 修改文档数据(数据update) put方式修改 post方式修改 删除文档&索引 ...

  3. php session 的使用方法

    public function insert(Request $request){ $parm = $request->except('token'); $this->validate($ ...

  4. laravel 登录+中间件拦截+红柚小说网小说采集+图片本地化

    .......................登录界面 <!doctype html> <html lang="en"> <head> < ...

  5. 详解Java中的抽象类和抽象方法

    引言 如上图,二维图形类有三个子类,分别是正方形类,三角形类,圆形类: 我们都知道要求正方形的面积,直接使用面积公式边长的平方即可,同理三角形的是底乘高除以2,圆的面积是$\pi$乘以半径的平方.那么 ...

  6. Dapr云原生应用开发系列7：工作流集成

    题记:这篇介绍一个很有意思的东西,Dapr和Logic Apps这样的工作流引擎集成. Dapr工作流 在1年多前,Dapr的孵化团队搞了一个很有意思的东西:把Dapr和Logic Apps集成起来, ...

  7. 28 面向对象编程 instanceof 代码 小结 父类引用指向子类对象

    instanceof 代码 // main // Object > Person >Student Object object = new Student(); // 提取公式:XY之间是 ...

  8. ArcMap操作随记（3）

    1.地图四要素: 图名.图例.比例尺.指北针 2.[栅格计算器].[加权叠加]和[加权总和]的不同 [栅格计算器]的结果是浮点型小数 [加权叠加]工具,输入栅格必须为整型.若成本栅格涉及重分类,最好用 ...

  9. RabbitMQ入门-5.6-课堂笔记-01

  10. 如何使用coredump

    一.coredump 当用户态进程出现异常后,在该进程的执行目录下生成对应的coredump文件,如果我们想将coredump生成的位置做改变,就需要如下设置. echo "/home/co ...