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

Question

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

DEMO

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

Answer 1

试试这个:

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