javascript - Bootstrap下拉事件

Question

如何通过li元素的事件选择值？

<div class="btn-group" role="group">
    <button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
      Select  <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="dropDownId">
    </ul>
  </div> 

我动态填充它

for(var i = 0; i < data.stuff.length; i++){

  $("#dropDownId").append("<li><a data-value='"+i+"'>"+data.stuff[i].name+"</a></li>")
}

如何获取li元素中的值？我尝试过不同的版本，但没有任何效果。

Answer 1

希望这有帮助。您需要将 click 事件 附加到下拉列表的 a 标记，并在具有 selected ID 的范围中显示所选文本。

$('#dropDownId a').click(function () {
    $('#selected').text($(this).text());
});

$(function () {
	for (var i = 0; i < 10; i++) {
	    $("#dropDownId").append("<li><a data-value='" + i + "'>" + i + "</a></li>")
	}

	$('#dropDownId a').click(function () {
	    $('#selected').text($(this).text());
	});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container">
	<div class="btn-group" role="group">
		<button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
			<span id="selected">Select</span><span class="caret"></span>
		</button>
		<ul class="dropdown-menu" id="dropDownId">
		</ul>
	</div>
</div>