javascript - 获取选定的 li 文本并使用它设置菜单的文本

Question

1) 如何从子菜单中获取文本？ - 我无法获取文本/值 2) 如何用单击的子菜单的文本替换文本“菜单”？ - 当我用文本设置 a 时，插入符号意外地消失了

<a id="testa" class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 
    <span class="caret"></span>
</a>
<ul id="testul" class="dropdown-menu">
    <li><a href="#">Submenu 1-1</a></li>
    <li><a href="#">Submenu 1-2</a></li>
    <li><a href="#">Submenu 1-3</a></li>                        
</ul>

我有这个 jQuery 来监听点击:

$("#testul").on("click", "li a", function (event) {
    console.log(event);
    var clickedSubMenu = ???;
    $('#testa').text(clickedSubMenu); // <-- removes the caret icon
});

注意:如果我使用 select 和 option 是可能的，但是因为我需要这些元素是 Bootstrap 的样式，所以我坚持使用

<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

---

$('#button1').click(function(){ 
    alert($('#combo').val());
});

Answer 1

虽然很简单，

http://jsfiddle.net/muqjtdg6/

$("#testul").on("click", "li a", function (event) {
    console.log(event);
    event.preventDefault();
    var clickedSubMenu = $(this);
    $('#testa').text(clickedSubMenu.text()); // <-- removes the caret icon
});

请注意，我使用了 event.preventDefault() ，您不需要它，但如果您为您的 anchor 输入一个 url，您将需要有该声明

编辑:

如果你想保留插入符号设置html()而不是http://jsfiddle.net/muqjtdg6/1/

$("#testul").on("click", "li a", function (event) {
    console.log(event);

    var clickedSubMenu = $(this);
    $('#testa').html(clickedSubMenu.text()+'<span class="caret"></span>'); // <-- removes the caret icon
});