从具有特定ID的Bootstrap下拉菜单中获取选定的项目值

36 浏览
0 Comments

从具有特定ID的Bootstrap下拉菜单中获取选定的项目值

我正在使用Bootstrap 3和JavaScript创建自己的“ComboBox”。这里是JSFiddle链接，展示了我目前的进展：

HTML：

JavaScript：

$(document).on('click', '.dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

这种方法在页面上重复使用这个“ComboBox”时效果很好。问题在于JQuery函数在寻找任何/所有的'.dropdown-menu li a'时出现了问题。

如何修改我的JQuery代码，只查找ID为demolist的UL并获取其选定的值？

我尝试了以下方法，但都没有成功：

我尝试了'#demolist .dropdown-menu li a'，但这不会触发函数：

$(document).on('click', '#demolist .dropdown-menu li a', function() {
    $('#datebox').val($(this).html());
});

我尝试调用#demolist的点击事件，但#datebox会获取#demolist的所有列表项的HTML，而不是选定项的innerHTML：

$('#demolist').on('click', function(){
    $('#datebox').val($(this).html());
});

更新：

有效的解决方案如下：

$('#demolist li a').on('click', function(){
    $('#datebox').val($(this).html());
});

或者

$('#demolist li').on('click', function(){
    $('#datebox').val($(this).text());
});

0

3 答案

0 Comments

问题出现的原因是代码中使用了错误的选择器来获取被选中的项的值。解决方法是使用正确的选择器来获取被选中项的值。

具体解决方法是将代码中的选择器由`#demolist li`改为`#demolist li a`。这样可以正确地获取被选中项的值。

以下是修改后的代码：

$('#demolist li a').on('click', function(){
    $('#datebox').val($(this).text());
});

修改后的代码可以从具有指定ID的Bootstrap下拉菜单中获取被选中项的值。

0
0 Comments

问题出现的原因：用户想要从具有特定ID的Bootstrap下拉菜单中获取所选项目的值，但是现有的代码会触发所有具有相同类名的元素的点击事件，而不是特定的下拉菜单。

解决方法：根据用户的需求，可以使用特定的选择器#demolist.dropdown-menu li a来获取特定下拉菜单中所选项目的值。这样不会触发其他具有相同类名的元素的点击事件。

另外，还可以使用更通用的方法，通过使用类而不是ID，并使用parent().find()来更新与点击链接相邻的输入框。这样可以在页面上拥有任意数量的这些代码块，而无需重复的JavaScript代码。

用户最终选择了第二种方法，并解决了问题。

0
0 Comments

问题的出现原因：用户想要从具有特定ID的Bootstrap下拉菜单中获取所选项的值。

解决方法：使用jQuery编写代码，通过点击事件获取所选项的值。

文章内容如下：

设计使用Bootstrap的代码：

jQuery代码：

以上代码中，我们首先定义了一个具有特定ID（"demolist"）的下拉菜单。然后，使用jQuery编写了一个脚本。在脚本中，我们使用`$(document).ready()`函数来确保DOM加载完成后再执行代码。接下来，我们使用`$('#demolist a')`选择器来选中下拉菜单中的所有链接。然后，我们使用`.on('click')`方法为这些链接绑定了点击事件。在点击事件中，我们使用`$(this).text()`方法获取所选项的文本值，并将其存储在变量`txt`中。最后，我们使用`alert()`函数显示一个包含所选项值的提示框。

通过以上代码，用户可以从具有特定ID的Bootstrap下拉菜单中获取所选项的值。

0