今天为大家分享一篇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. Shell echo 命令

    Shell 的echo 指令与PHP的echo指令类似,都是用于字符串的输出.命令格式: echo string 您可以使用echo实现更复杂的输出格式控制. 1.显示普通字符串: echo &quo ...

  2. Laravel引入第三方库的方法

    https://blog.csdn.net/will5451/article/details/52472695 1.首先在app目录下创建一个新的文件夹,命名libs(可自定义) 2.(可选)考虑到后 ...

  3. django 中models表的多对一,多对多的理解

    django 表的理解 好处:设计的好,会清晰,易于理解和维护,后期开发事半功倍,一目了然. 1. 一对一的表,两表的属性实际上完全可以合并成一个表,共用一个主键即可: 2. 一对多的表,可以设中间关 ...

  4. Python的内置方法，abs,all,any,basestring,bin,bool,bytearray,callable,chr,cmp,complex,divmod

    Python的内置方法 abs(X):返回一个数的绝对值,X可以是一个整数,长整型,或者浮点数,如果X是一个复数,此方法返回此复数的绝对值(此复数与它的共轭复数的乘积的平方根) >>> ...

  5. poj 2451 Uyuw's Concert （半平面交）

    2451 -- Uyuw's Concert 继续半平面交,这还是简单的半平面交求面积,不过输入用cin超时了一次. 代码如下: #include <cstdio> #include &l ...

  6. PHP实现微信小程序人脸识别刷脸登录功能

    首先我们先确认我们的百度云人脸库里已经上传了我们的个人信息照片 然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器 public function login(){    // ...

  7. UVA 1343 - The Rotation Game-[IDA*迭代加深搜索]

    解题思路: 这是紫书上的一道题,一开始笔者按照书上的思路采用状态空间搜索,想了很多办法优化可是仍然超时,时间消耗大的原因是主要是: 1)状态转移代价很大,一次需要向八个方向寻找: 2)哈希表更新频繁: ...

  8. 2019-9-2-win10-uwp-列表模板选择器

    title author date CreateTime categories win10 uwp 列表模板选择器 lindexi 2019-09-02 12:57:38 +0800 2018-2-1 ...

  9. H3C DHCP简介

  10. Fast Stone截图工具使用教程

    下面是Fast Stone的显示面板,很小巧,但功能强大 一.特殊功能 1.1 添加水印 (1)选择功能栏的"Edge" (2)将要水印的图片选中,选择水印图片的放置位置,应用即可 ...