JavaScript + Bootstrap 下拉列表不允许我选择项目

Question

我有这个引导布局，它是一个手风琴项内的容器。有一个下拉按钮，包含消息，还有另一个按钮可以打开一个模式以插入新消息并将其显示在下拉列表中，使用 localStorage。

当页面加载或刷新时，我可以正常选择下拉项目，但是当我添加项目时，它实际上显示在列表中，但我无法选择它也无法选择任何其他项目，并且所选项目是保留在那里，直到页面再次重新加载。

我仍然可以使用模式添加更多消息，它们仍会显示在列表中。

控制台没有错误提示我。

JavaScript 代码位于代码底部。

演示视频：https://www.youtube.com/watch?hd=1&v=fhNfpOaJbGs

HTML：

 <div class="container">
   <div class="row justify-content-center">
        <div class="col-4">
            <div class="dropdown">
                <button class="btn btn-secondary" type="button" id="ddMensagens" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Selecione Mensagem
                </button>
                <div class="dropdown-menu scrollable-menu" id="mensagem" aria-labelledby="ddMensagens">
                </div>
            </div>
        </div>
        <div class="col-4">
            <button type="button" class="btn btn-outline-success btn-sm" data-bs-toggle="modal" data-bs-target="#staticBackdrop" title="Clique para cadastrar uma nova mensagem">
                Cadastrar Nova Mensagem
            </button>
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered"">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalMensagem">Nova Mensagem</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                        </div>
                        <div class="modal-body">
                            <div class="container">
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="txtMensagem">Digite sua mensagem</label>
                                            <input type="text" class="form-control" id="txtMensagem" placeholder="Mensagem" style="width: 400px">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fechar</button>
                            <button type="button" class="btn btn-primary" id="saveMensagem" onclick="addItem();" data-bs-dismiss="modal">Salvar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br />
    </div>
</div>

JavaScript：

<script defer>
        function updateSelect() {
            const select = document.querySelector('#mensagem');
            const oldMessage = JSON.parse(localStorage.getItem('mensagem')) || false;

            if (oldMessage) {
                select.innerHTML = '';
                oldMessage.forEach(element => {
                    select.innerHTML += `<button class='dropdown-item' type='button'>${element}</option>`
                });
            } else {
                localStorage.setItem('mensagem', '[]')
            }
        }
        function addItem() {
            const text = document.getElementById('txtMensagem').value;

            const database = JSON.parse(localStorage.getItem('mensagem')) || [];

            if (database && text.length > 3) {
                const repetido = database.find(item => item === text.value);

                if (!repetido) {
                    const novasMensagens = [...database, text];
                    localStorage.setItem('mensagem', JSON.stringify(novasMensagens))
                    updateSelect();
                    text.value = ''
                }
            }
        }
        updateSelect()
    </script> 

链接：

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

为了解决我的问题（我仍然不知道）必须进行更改：

function getMensagem() {
    let valueMensagem = document.getElementById('mensagem').value;
    if (valueMensagem != 0) {
        $('select option:selected').each(function (e) {
$('#ContentPlaceHolder1_ddMensagensCopy').val(valueMensagem);
                    });
                }
                else {
                    $('#ContentPlaceHolder1_ddMensagensCopy').val('');
                }
            }

function updateSelectMensagem() {
            const select = document.querySelector('#mensagem');
            const oldMessage = JSON.parse(localStorage.getItem('mensagem')) || false;

            if (oldMessage) {
                select.innerHTML = "<option value='0'> Selecione uma mensagem </option>";
                oldMessage.forEach(element => {
                    select.innerHTML += `<option class='dropdown-item'>${element}</option>`
                });
            } else {
                localStorage.setItem('mensagem', '[]')
            }
        }
        function addItemMensagem() {
            const text = document.getElementById('txtMensagem').value;

            const database = JSON.parse(localStorage.getItem('mensagem')) || [];

            if (database && text.length > 3) {
                const repetido = database.find(item => item === text.value);

                if (!repetido) {
                    const novasMensagens = [...database, text];
                    localStorage.setItem('mensagem', JSON.stringify(novasMensagens))
                    updateSelectMensagem();
                    text.value = ''
                }
            }
        }
        updateSelectMensagem()

<div class="col-4">
    <div class="dropdown-boleto">
        <select id="mensagem" class="btn btn-secondary select">
            <option value="0">Selecione uma mensagem</option>
        </select>
    </div>
</div>

.select option {
            background: white;
            color: #212529;
        }

Answer 1

事实上，一切都按预期进行

https://codesandbox.io/s/shy-cookies-1xt96?file=/index.html