<dl> <dt> <dd> <li> 下拉菜单使用 Javascript 获取信息

<dl> <dt> <dd> <li> dropdown getting information with Javascript

本文关键字:Javascript 获取 信息 dd dl dt li 下拉菜单      更新时间:2023-09-26

我有一个看起来像这样的下拉列表。我需要帮助使用 javascript 从当前选择中获取信息。我需要添加什么id和任何适当的javascript调用来获取当前所选
的"值"

<dl id="order" class="dropdown">
  <dt><a href="#"><span>(Name of Selected Item Ends up here)</span></a></dt>
  <dd>
    <ul style="z-index: 1000; display: none; ">
      <li value="1"><a href="1">Item 1</a></li>
      <li value="2"><a href="2">Item 2</a></li>
      <li value="3"><a href="3">Item 3</a></li>
    </ul>
  </dd>
</dl>
$(document).ready(function() {
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });
    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        if(order != getSelectedValue("order")) {
        order = getSelectedValue("order");
        }
    });
    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
        return false;
    });
});

单击时,这将返回单击的列表项的值:

$(this).closest('li').attr('value');

然后,您可以删除 getSelectedValue 函数。

js小提琴示例