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 event附加到下拉列表的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>

Answer 2

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<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="tmplDropDown">
    </ul>
  </div>

＆＃13;

Bootstrap下拉事件

2 个答案: