js动态改变下拉框内容
今天为大家分享一篇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动态改变下拉框内容的更多相关文章
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- jquery 动态添加下拉框 需要增加 煊染 selectmenu("refresh");
若通过js动态选择下拉框的值必须刷新下拉框,例如:var selArray = $("select#sel");selArray[0].selectedIndex = 1;selA ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- layui 根据根据后台数据动态创建下拉框并同时默认选中
第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-for ...
- jquery 根据后台传过来的值动态设置下拉框、单选框选中
更多内容推荐微信公众号,欢迎关注: jquery 根据后台传过来的值动态设置下拉框.单选框选中 $(function(){ var sex=$("#sex").val(); va ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- Jquery动态设置下拉框selected --(2018 08/12-08/26周总结)
1.Jquery动态根据内容设置下拉框selected 需求就是根据下拉框的值动态的设置为selected,本以为很简单,网上一大推的方法,挨着尝试了之后却发现没有一个是有用的.网上的做法如下: &l ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- PHP下拉框内容随单选框内容变化
这久在修改一个项目的小东西,要求把下拉框改为单选框,由于代码封闭,修改不了获取函数,所以想了个办法让下拉框的内容随单选框的内容变化,下面把代码分享给大家: <!DOCTYPE html PUBL ...
随机推荐
- 【HAOI2015】树上染色
[HAOI2015]树上染色 这题思路好神仙啊,首先显然是树形dp,f[i][j]表示在以i为根的子树中选j个黑点对答案的贡献(并不是当前子树最大值),dp时只考虑i与儿子连边的贡献.此时(i,son ...
- Laravel5.1 实现第三方登录认证教程之 - 微信登录
https://laravel-china.org/topics/2451/laravel51-implementation-of-the-third-party-login-authenticati ...
- hdu 3832 Earth Hour(最短路变形)
Earth Hour Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 125536/65536 K (Java/Others)Total ...
- windows下检出项目和提交项目
1.git status:查看工作区的状态 2.git add 文件名:建立跟踪 3.git commit:提交变更 4.git push:发布本地操作 5.解决 The requested UR ...
- window10+python3.7安装tensorflow--gpu tensorflow 安装
能安装GPU的前提是:1.显卡支持CUDA (1)右击我的电脑–属性 (2)打开设备管理器 (3)显示适配器 我的电脑是支持CUDA的 2.pip 版本 >= 8.1查看pip版本 :pip ...
- PyTorch里面的torch.nn.Parameter()
在刷官方Tutorial的时候发现了一个用法self.v = torch.nn.Parameter(torch.FloatTensor(hidden_size)),看了官方教程里面的解释也是云里雾里, ...
- Python--day43--连表查询(重要)
- Python--day34--socket模块的方法
官方文档对socket模块下的socket.send()和socket.sendall()的解释如下: sk.setblocking(False)方法 import socket sk = socke ...
- 【js】vue 2.5.1 源码学习 (七) 初始化之 initState 响应式系统基本思路
大体思路(六) 本节内容: 一.生命周期的钩子函数的实现 ==> callHook(vm , 'beforeCreate') beforeCreate 实例创建之后 事件数据还未创建 二.初始化 ...
- 2019年第二阶段我要变强个人训练赛第八场 B.序列(seq)
传送门 B.序列(seq) •题目描述 给出一个长度为n的序列a,每次对序列进行一下的某一个操作. •输入 第一行两个整数n,q表示序列长度和操作个数. 接下来一行n个数,表示序列a. 接下来q行表示 ...