无法更改 HTML 下拉列表值答案

【问题标题】：Can't change HTML dropdown list value无法更改 HTML 下拉列表值
【发布时间】：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 它将选定的选项设置为设置的选择值，如果我没记错的话。

标签： javascript html jquery html-select

【解决方案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 必须是一个字符串。