今天为大家分享一篇js动态设置select下拉菜单的默认选中项实例，具有很好的参考价值，希望对大家有所帮助。

代码实例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <select id="box">

        <option value ="volvo">Volvo</option>

        <option value ="saab">Saab</option>

        <option value="opel">Opel</option>

        <option value="audi">Audi</option>

    </select>

    <button id="btn">设置</button>

</body>

</html>

<script>

// 根据指定内容设置下拉框的内容 111|222|333|444

let btn = document.querySelector('#btn')

    btn.onclick = () =>{

    setselectchooseditem('box','222|我的|她')

}

// 封装函数

function setselectchooseditem (idStr, text) {

    let $id = document.getElementById(idStr)

    let str = text

    let arr = str.split('|')

    let output = ''

    for (let i in arr) {

        output += `<option value="">${arr[i]}</option>`

    }

    $id.innerHTML = output

}

</script>

js动态改变下拉框内容的更多相关文章

  1. js改变下拉框内容

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

  2. jquery 动态添加下拉框 需要增加 煊染 selectmenu("refresh");

    若通过js动态选择下拉框的值必须刷新下拉框,例如:var selArray = $("select#sel");selArray[0].selectedIndex = 1;selA ...

  3. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  4. layui 根据根据后台数据动态创建下拉框并同时默认选中

        第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...

  5. jquery 根据后台传过来的值动态设置下拉框、单选框选中

    更多内容推荐微信公众号,欢迎关注: jquery  根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...

  6. bootstrap-multiselect.js多选下拉框初始化时默认选中初始值

    bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式  二.HTML代码 <select id="msgRoles" multiple=&q ...

  7. Jquery动态设置下拉框selected --（2018 08/12-08/26周总结）

    1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: &l ...

  8. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  9. PHP下拉框内容随单选框内容变化

    这久在修改一个项目的小东西,要求把下拉框改为单选框,由于代码封闭,修改不了获取函数,所以想了个办法让下拉框的内容随单选框的内容变化,下面把代码分享给大家: <!DOCTYPE html PUBL ...

随机推荐

  1. behavior planning——11 create a cost function speed penalty

    A  key part of getting transitions to happen when we want  them to is the design of reasonable cost ...

  2. 数(aqnum)

    数(aqnum) 3.1 题目描述 秋锅对数论很感兴趣,他特别喜欢一种数字.秋锅把这种数字命名为 农数 ,英文名为 AQ number . 这种数字定义如下: 定义 1 一个数 n 是农数,当且仅当对 ...

  3. HTML静态网页--JavaScript-语法

    1.基本数据类型: 字符串.小数.整数.日期时间.布尔型等. 2.变量: 都是通用类型var,可以随便存储其他类型的值,可以直接使用,不用定义,但习惯上定义.定义变量:var a:所有变量定义 都用v ...

  4. java基本类型和String之间的转换

    String → 基本类型,除了Character外所有的包装类提供parseXxx(String s)静态方法,用于把一个特定的字符串转换成基本类型变量: 基本类型 → String,String ...

  5. Chrome 里的请求报错 " Provisional headers are shown"

    之所以会出现这个警告,是因为去获取该资源的请求其实并(还)没有真的发生; 背景:提交表单,按钮点击<button>标签,触发事件,ajax发送请求,服务器返回信息; <button& ...

  6. Vue打包文件放在服务器，浏览器存在缓存问题的解决

    在入口文件index.html添加 <meta http-equiv="pragram" content="no-cache"> <meta ...

  7. WPF 使用 Composition API 做高性能渲染

    在 WPF 中很多小伙伴都会遇到渲染性能的问题,虽然 WPF 的渲染可以甩浏览器渲染几条街,但是还是支持不了游戏级的渲染.在 WPF 使用的 DX 只是优化等级为 9 和 DX 9 差不多的性能,微软 ...

  8. post提交方式为什么要序列化，而Get提交方式就不用？序列化做了什么？

    这是因为后台能够直接处理的数据格式,是一种经过序列化的键值对数据,比如前端要向后台提交三个参数,分别是a=1,b=2,c=3,那么后台接收到的数据就应该是a=1&b=2&c=3(可以看 ...

  9. linux flags 参数

    记住 kmalloc 原型是: #include <linux/slab.h> void *kmalloc(size_t size, int flags); 给 kmalloc 的第一个参 ...

  10. linux 短延时

    当一个设备驱动需要处理它的硬件的反应时间, 涉及到的延时常常是最多几个毫秒. 在这 个情况下, 依靠时钟嘀哒显然不对路. The kernel functions ndelay, udelay, an ...