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

Question

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

当我进行选择时，我希望这个下拉列表的新值被设置为任何文本，本质上。为此，我有以下代码：

$(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());
        });
    });

为了测试这一点，我插入了一个警报：

$(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());

            var tmp = $(this).parents(".dropdown").find('.btn').val();
            alert("Current .btn val is: " + tmp);
        });
    });

此时，警报显示：

当前 .btn val 为：[期望值]

这就是我想要的。

但是，当以下代码运行时，稍后在不同的脚本中...

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>

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

我该如何解决这个问题？提前致谢。

Answer 1

重新表述你正在尝试做的事情

当您点击$('#chartRefresh') 时，您希望$("#fixVersionDropdownButton").val() 和$("#fixVersionDropdown").val() 在点击的那一刻。

为什么你的代码不这样做

正如@Rory McCrossan 所提到的，这些元素的值在被读取之前并不存在于 DOM 中，因为这些元素本身并不存在。在tmp 和tmp1 分配之后，DOM 被加载。过了一段时间，DOM 完成加载，然后调用 callback $(document).ready(callback)。此时，tmp 和tmp1 仍然“没有值”。当点击处理程序被调用时，tmp 和 tmp1 仍然有“没有值”，解释你的结果。

一种让你的代码做你想做的事情的方法

您必须及时“赶上”以下瞬间：

DOM 已完成加载。 为什么？在将事件处理程序附加到它们或在这种情况下获取它们的值之前，您需要保证 DOM 中的所有元素（例如 $('#chartRefresh')、$("#fixVersionDropdownButton") 和 $("#fixVersionDropdown")）都存在。

点击$('#chartRefresh') 为什么？您需要保证您要读入tmp和tmp1的值是执行点击时的值。

要“捕获”这些时刻并保证在这些时刻出现正确的代码，请查看以下回调。

DOM 加载完成时运行的回调：callback in $(document).ready(callback)

点击$('#chartRefresh') 时运行的回调：“callback in $('#chartRefresh').click(callback)

一种编码方式

$(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)
    });
});

参考文献

https://api.jquery.com/click/

旁注：对于更高级的事件委托，它不仅涉及现有元素，还涉及未来元素http://api.jquery.com/on/