javascript - 如何将下拉列表转换为常规列表?
问题描述
这是我尝试过的:
HTML:删除了 Select 命令。我尝试将属性添加到<options>
. 然而,所有这些都给出了奇怪的结果。我在下面所做的确实生成了一个常规列表,但是它使该选项不可点击。我可能正面临这个问题,因为我删除了 select 命令,但是,我不知道我还能如何进行更改。
<br><div id="qrcode"></div><br/>
<label onchange="setPicture();" id="myList" class="list-content">
</label>
JS:我在JS中有三个函数,自动更新下拉列表,根据选择改变二维码图片,运行二维码脚本。我认为不需要对此进行任何更改。
解决方案
不完全确定你的意思,但你可以很容易地<select>
用 a替换。<ul>
只需遍历选项并构建一个列表以用作替换。
replaceSelectWithClickableList(document.querySelector('.target'), (e) => {
console.log(`You selected: ${e.target.textContent}`);
e.target.classList.toggle('selected-item');
});
function replaceSelectWithClickableList(select, eventListener) {
let ul = document.createElement('UL');
ul.classList.add('selectable-items');
Array.from(select.options).forEach(function(option) {
let li = document.createElement('LI');
li.textContent = option.text; // or option.value
li.classList.add('selectable-item');
li.addEventListener('click', eventListener);
ul.appendChild(li);
});
replaceWith(select, ul);
}
function replaceWith(source, target) {
source.parentNode.replaceChild(target, source);
}
.selectable-items {
border: thin solid #AAA;
list-style: none;
padding: 0;
width: 8em;
}
.selectable-items .selectable-item {
cursor: pointer;
padding: 0.333em;
}
.selectable-items .selectable-item:nth-child(odd) { background: #F7F7F7; }
.selectable-items .selectable-item:nth-child(even) { background: #E7E7E7; }
.selectable-items .selectable-item:hover { background: #FFE; }
.selected-item:after {
color: #0A0;
content: '\2713'; /* Unicode check-mark */
float: right;
font-size: 0.8em;
font-weight: bold;
margin-right: 0.5em;
}
.as-console-wrapper { max-height: 100% !important; max-width: 70%; margin-left: 30%; }
<h2>Selectable List</h2>
<select class="target">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
推荐阅读
- c# - 实体框架核心唯一索引测试
- android - 在 Windows 中获取反应原生 IOS .ipa 文件
- php - symfony/encore @babel/preset-env 设置 corejs 的正确方法
- php - have_posts() while 循环忽略返回的任何 HTML
- python - databuffer += data_str TypeError:只能将str(不是“_io.TextIOWrapper”)连接到str
- ios - JSONDecoder 无法解码嵌套字典
- .net-core - 在 VS2017 中列出给定项目/.NET Core 项目解决方案的“递归依赖”的所有 nuget 包
- javascript - 如何让用户在 if 语句中输入有多个正确答案
- html - 使用两个同名但扩展名不同的html索引页面
- mysql - 调用特定列