如何从引导下拉菜单中获取值（jQuery）

Posted 2023-02-16

【中文标题】如何从引导下拉菜单中获取值（jQuery）

【英文标题】：How to get an value from a bootstrap dropdown menu (jQuery)

【发布时间】：2019-06-06 08:25:36

【问题描述】：

我正在设置一个网络服务器，我想从引导下拉菜单对等 websocket 发送选定的值。

我已经尝试为所选项目设置一个值 数据值=“某个值”和值=“某个值”。并尝试使用 jQuery 获取它们。

<div class="dropdown">
    <button class="btn dropdown-toggle config_btn" type="button" data-toggle="dropdown" id="btn_baud">
        <span class="caret"></span></button>
    <u1 class="dropdown-menu" id="baudrate">
        <li><a href="#">250 kBit/s</a></li>
        <li><a href="#">500 kBit/s</a></li>
        <li><a href="#">1 MBit/s</a></li>
    </u1>
</div>

在下拉菜单按钮中显示所选值：

$(document).ready(function()
    $("#baudrate a").click(function()
        $("#btn_baud").text($(this).text());
    );
);

从下拉菜单中获取选定的文本：

$(document).ready(function() 
    $("#baudrate li a").click(function() 
        baudrate = $(this).html();
    );
);

我能够从下拉菜单中获取所选文本，但无法获取值。

当我尝试设置如下值时：

<li data-value="250"><a href="#">250 kBit/s</a></li>
<li><a data-value="250" href="#">250 kBit/s</a></li>

我无法在我的 jQuery 中使用 .value() 获取它。

【参考方案1】：

它不重视它的数据。

https://api.jquery.com/data/

$(element).data('value');

【参考方案2】：

HTML：

<div class="dropdown">
    <button class="btn dropdown-toggle config_btn" type="button" data-toggle="dropdown" id="btn_baud">
        <span class="caret"></span></button>
    <u1 class="dropdown-menu" id="baudrate">
        <li><input type="hidden" value="250"/><a href="#">250 kBit/s</a></li>
        <li><input type="hidden" value="500"/><a href="#">500 kBit/s</a></li>
        <li><input type="hidden" value="1"/><a href="#">1 MBit/s</a></li>
    </u1>
</div>

JS：

<script>
    $(document).ready(function()
         $("#baudrate li a").click(function() 
            baudrate = $(this).parent().find('input').val();
            alert(baudrate);
        );
    );
</script>

【讨论】：

如果你能解释你的答案会更好。

在 隐藏输入中包含您需要的值。在 js 内部，您正在寻找这个输入标记并将其值带到外部。在这种情况下， li 标记用作容器。

感谢您的帮助。这种方法与其他方法相比有什么优势？

这种通过点击一个元素从你的DOM中获取内容的方式非常有用，首先，你可以通过一次获取完整数据来创建一个动态页面。您可以将它放在许多隐藏的输入中，并通过使用 js 使其可见。它看起来像一个“蠕虫”——您正在初始化一个事件（入口孔）并从您的活动页面（出口孔）获取任何内容。通过这种方式，仅使用 js 即可轻松更改活动页面（更改值、文本、追加或删除元素）。

当然，它在处理数据表时非常有用。最后一个我的数据表是由动态日期选择器升级的，并且只为选定的行加载模式窗口。