Question

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

当我做出选择时，我希望将此下拉列表的新值设置为文本中的任何内容，实质上。为此，我有以下代码：

-1

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

 ______________________________
|                              |  \                  \
|                              |   |                  \
|         "Page 1"             |   |__ 1000 records    |
| records at offset     0..999 |   |                   |
|                              |   |                   |
|______________________________|  /                    |
|                              |  \                    |
|                              |   |                   |__ all 2341 records
|         "Page 2"             |   |__ 1000 records    |
| records at offset 1000..1999 |   |                   |
|                              |   |                   |
|______________________________|  /                    |
|                              |  \                    |
|         "Page 3"             |   |__  341 records    |
| records at offset 2000..2340 |   |                  /
|______________________________|  /                  /

此时，警报显示：

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

这就是我想要的。

但是，当以下代码运行时，稍后会在另一个脚本中运行...

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

在我看来好像我不是以某种方式实际设置值（虽然这似乎不太可能基于第一个警报......也许我不知何故设置其他东西的价值？）或者我不是正确读取价值。

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

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
中的$(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/

附注：对于更高级的事件委派，不仅针对现有元素，还针对未来元素http://api.jquery.com/on/

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

1 个答案:

改写你想要做的事情

为什么你的代码不这样做

让您的代码按照您的意愿执行的一种方法

编码的一种方法

参考