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

Question

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

当我做出选择时，我希望将此下拉列表的新值设置为实质上的任何文本。为了实现这一点，我有以下代码:

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

此时，警报显示:

Current .btn val is: [desired value]

这就是我想要的。

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

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

生成的警报只是说

Fix Version Dropdown Button value is:

后跟

Fix Version Dropdown value is:

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

<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仍然“没有值(value)观”。当调用单击处理程序时，tmp和tmp1仍然有“没有值”，解释你的结果。

让代码执行您想要的操作的一种方法

您必须及时“捕捉”以下时刻:

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

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

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

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

当 $('#chartRefresh') 时运行的回调单击:“callback 在 $('#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/

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