无法更改 HTML 下拉列表值
Posted
技术标签:
【中文标题】无法更改 HTML 下拉列表值【英文标题】：Can't change HTML dropdown list value 【发布时间】：2021-12-28 10:49:52 【问题描述】：我创建了一个站点：pg.wcyat.me (Source code)，使用 github.com/thdoan/pretty-dropdowns 作为下拉列表。 我可以使用 javascript 更改选择列表的值，例如：
document.getElementById('numbers').value = "false"
$dropdown.refresh()
那么“包含数字”列表将显示为 false。
但是，如果我在界面中进行更改（使用下拉列表将“包含数字”从“true”（初始值）更改为“false”），那么：
document.getElementById('numbers').value
//returns "true"
如果我刷新它：
$dropdown.refresh()
“包括数字”列表将显示“真”，就好像我从未更改过该选项一样。
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="https://static.wcyat.me/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="https://pg.wcyat.me/assets/css/input.css" />
<link rel="stylesheet" type="text/css" href="https://pg.wcyat.me/assets/css/main.css" />
<link rel="stylesheet" type="text/css" href="https://pg.wcyat.me/assets/css/prettydropdowns.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://static.wcyat.me/js/init.js"></script>
</head>
<body>
<main>
<center>
<h1 style="background-color: black; color: white; height: 150px; width: 100%; padding-top: 50px;" id="output"></h1>
<div class="iota">
<button class="btn btn-primary" style="font-size: large;" onclick="copy()" id="copy">Copy</button>
<button class="btn btn-primary" style="font-size: large;" onclick="document.getElementById('output').innerHTML = generate(); document.getElementById('copy').innerHTML = 'Copy'" value="Generate">Generate</button>
</div>
<div>
<h1><strong>Options</strong></h1>
<label style="margin-left: 10px;" for="numbers">Include numbers</label>
<label style="margin-left: 20px" for="upper">Include uppercase characters</label>
<label style="margin-left: 20px" for="lower">Include lowercase characters</label>
<label style="margin-left: 20px" for="special">Include special characters</label><br>
<select id="numbers" name="numbers" onchange="change('numbers')">
<option value="true">true</option>
<option value="false">false</option>
</select>
<select style="margin-left: 60px;" id="upper" name="upper" onchange="change('upper')">
<option value="true">true</option>
<option value="false">false</option>
</select>
<select style="margin-left: 80px;" id="lower" name="lower" onchange="change('lower')">
<option value="true">true</option>
<option value="false">false</option>
</select>
<select style="margin-left: 60px;" id="special" name="special" onchange="change('special')">
<option value="true">true</option>
<option value="false">false</option>
</select>
</div>
</center>
</section>
</main>
<script src="https://pg.wcyat.me/assets/js/jquery.prettydropdowns.js"></script>
<script src="https://pg.wcyat.me/assets/js/pg-web.js"></script>
<script src="https://pg.wcyat.me/assets/js/copy.js"></script>
<script src="https://pg.wcyat.me/assets/js/select.js"></script>
<script>
$(document).ready(function()
$dropdown = $('select').prettyDropdown();
);
</script>
</body>
</html>
【问题讨论】：
您到底面临什么问题？不清楚 作为用户，我无法更改下拉列表的选项。也就是说，视觉上是变化的，但实际上并没有。 请使用[<>] sn-p 编辑器发布minimal reproducible example 与您的插件的CDN 版本
我在这里看到我选择为class="selected" 的值：<ul tabindex="0" role="listbox" aria-labelledby="menu411779999995231600" aria-activedescendant="item411779999995231600-2" aria-expanded="false" style="max-height:48px;margin:0px 0px 0px 0px;" class=""><li id="item411779999995231600-2" data-value="false" role="option" style="width: 87.0833px;" class="selected">false<span aria-hidden="true" class="checked"> ✓</span></li><li id="item411779999995231600-1" data-value="true" role="option" class="" style="width: 87.0833px;">true</li></ul>
@devzarghami 它将选定的选项设置为设置的选择值，如果我没记错的话。
【参考方案1】：
function selected()
for (let i in options.include)
document.getElementById(i).value = options.include[i]
function change(v)
options.include[v] = !options.include[v]
【讨论】：
如果 options 不只是 true 或 false 这将不起作用，并且 document.getElementById(i).value 必须是一个字符串。以上是关于无法更改 HTML 下拉列表值的主要内容，如果未能解决你的问题，请参考以下文章