javascript - JavaScript/JQuery Combo 之类的下拉菜单问题

Question

我想知道是否有人可以调整我的代码以获得我正在寻找的功能。我在这里遗漏了一些东西。我快到了。问题是当从列表中选择一个菜单项时，它并没有向上移动而是被复制了。然后，如果我再次单击以下拉此菜单，那么我将在菜单中获得两个相同的项目。理想情况下，我需要将选定的菜单项移动到顶部，并且菜单中没有任何重复的内容。请在这里查看我在 jsfiddle 上的工作原型：

演示

我还想知道您是否可以将菜单项内的文本放置在中间亮起，左边距为 10 像素。我试图做到这一点，但这并不像我预期的那样容易。提前谢谢了。

Answer 1

这就是你所需要的：

演示小提琴

$(document).ready(function() {
     
    var temp = '';
    
    $('.dropdown dt:eq(0)').on('click',function(){
        $('.dropdown dd ul').toggle();
    });
    
    $('dl.dropdown li').on('click',function(){
        $thisA = $('a', this);
        temp = $thisA.text();
        $thisA.closest('li').hide().siblings('li').show();
        $('.dropdown span').text(temp);
        $('.dropdown dd ul').hide();
    });

});

Answer 2

尝试这个：

$(".dropdown dd ul li a").click(function() {
    $(".dropdown dd ul li a").css("display", "block");
    var text = $(this).html();
    $(this).css("display", "none");
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
    $("#result").html("Selected value is: " + getSelectedValue("sample"));
});

http://jsfiddle.net/DAgGP/3/

对于 css 部分，您可以使用文本缩进：

.dropdown dd ul li a {
   text-indent: 10px;
}