Javascript 为什么我的代码没有正确地将值添加到下拉列表中？

我有一个引导下拉列表。在这个列表中，我有一堆由数据库填充的项目

当我进行选择时，我希望这个下拉列表的新值本质上设置为文本的任何内容。为了实现这一点，我有以下代码：

$(document).ready(function () {
        $(".dropdown-menu li a").click(function () {
            $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
            $(this).parents(".dropdown").find('.btn').val($(this).text());
        });
    });

由此产生的警报只是说

修复版本下拉按钮值为：

接

修复版本下拉列表值为：

我的下拉列表的代码如下：

<div class="dropdown" style="margin:5px;">
        <button class="btn btn-secondary dropdown-toggle" id="fixVersionDropdownButton" type="button" data-toggle="dropdown">
            Choose Fix Version
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="fixVersionDropdown"></ul>
    </div>

选择修复版本

在我看来，似乎我没有以某种方式实际设置值（尽管根据第一个警报，这似乎不太可能……也许我以某种方式设置了其他东西的值？），或者我没有正确读取值

我怎样才能解决这个问题？提前感谢。

重新表述您要做的事情 当您单击

$（“#图表刷新”）

时，您需要

$（“#fixVersionDropdownButton”）.val（）

和

$（“#fixVersionDropdown”）.val（）

为什么你的代码不这么做 正如@Rory McCrossan所提到的，这些元素的值在被读取之前并不存在于DOM中，因为元素本身并不存在。在

tmp

和

tmp1

赋值之后，加载DOM。一段时间后，DOM完成加载，然后调用

回调

$（文档）.ready（回调）

。此时，

tmp

和

tmp1

仍然具有“无值”。调用单击处理程序时，

tmp

和

tmp1

仍然具有“无值”，解释您的结果

一种让代码实现您希望它实现的功能的方法 您必须及时捕捉以下瞬间：

DOM已完成加载。为什么？在将事件处理程序附加到DOM中或获取其值之前，您需要保证DOM中的所有元素（例如，

$（“#chartRefresh”）

、

$（“#fixVersionDropdownButton”）

）都存在

点击

$（“#图表刷新”）

为什么？您需要确保要读入

tmp

和

tmp1

的值是执行单击时的值

要“捕获这些瞬间并确保在这些瞬间出现正确的代码，请查看以下回调

DOM加载完成时运行的回调：

Callback

位于

$（文档）.ready（Callback）

单击

$（“#图表刷新”）

时运行的回调：“

$（“#图表刷新”）中的
回调
。单击（回调）

一种编码方法 工具书类

---

旁注：对于更高级的事件委派，它不仅处理现有的元素，而且处理未来的元素

，您正在尝试在元素存在于DOM中之前读取这些元素的值。将

tmp

和

tmp1

声明移动到文档中。准备好的处理程序，甚至可能在

单击
处理程序中，d根据你的要求，这很有效。我发誓“DOM还没有准备好”的问题让我90%的时间都在思考。我感谢你的帮助。
var tmp = $("#fixVersionDropdownButton").val();
var tmp1 = $("#fixVersionDropdown").val();

$(document).ready(function () {
    $("#chartRefresh").click(function () {
        alert("Fix Version Dropdown Button value is: " + tmp);
        alert("Fix Version Dropdown value is: " + tmp1)
    });
});

<div class="dropdown" style="margin:5px;">
        <button class="btn btn-secondary dropdown-toggle" id="fixVersionDropdownButton" type="button" data-toggle="dropdown">
            Choose Fix Version
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="fixVersionDropdown"></ul>
    </div>

$(document).ready(function () {
    $("#chartRefresh").click(function () {
        var tmp = $("#fixVersionDropdownButton").val();
        var tmp1 = $("#fixVersionDropdown").val();
        alert("Fix Version Dropdown Button value is: " + tmp);
        alert("Fix Version Dropdown value is: " + tmp1)
    });
});