twitter-bootstrap 引导程序下拉设置选定的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36151348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap drop down set selected value
提问by Paul Sorensen
I have a Bootstrap drop down list
我有一个 Bootstrap 下拉列表
<button class="btn btn-primary" id="selectButton" data-toggle="dropdown">
Arrangement
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" id="ulGenres">
@foreach (var item in Model.Tours)
{
<li>
<a href="#" data-pdsa-dropdown-val="@item.Id">@item.StringValue</a>
</li>
}
</ul>
I would like to set selected item
我想设置所选项目
function DataLoad() {
var id = $("#TourId").val();
$("#Details").load('/umbraco/Surface/Tour/GetTourDetails?tourId=' + id);
}
$(document).ready(function () {
$("#ulGenres li a").on("click", function () {
// Get text from anchor tag
var id = $(this).data('pdsa-dropdown-val');
$("#TourId").val(id);
// Add text and caret to the Select button
var text = $(this).text();
$("#selectButton").html(text + ' <span class="caret"></span>');
// Put text into hidden field from model
$("#SelectedText").val(text);
DataLoad();
});
var id = $("#TourId").val();
$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]").trigger("click");
//$("#ulGenres li:first-child a").trigger("click");
});
This does not select the correct the element the wanted element
这不会选择正确的元素所需的元素
$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")
采纳答案by Mosh Feu
Just replace:
只需更换：
$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")
$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")
with
和
$("#ulGenres li a").filter("[data-pdsa-dropdown-val=" + id + "]")
$("#ulGenres li a").filter("[data-pdsa-dropdown-val=" + id + "]")
Working example:
工作示例：
function DataLoad() {
var id = $("#TourId").val();
$("#Details").load('/umbraco/Surface/Tour/GetTourDetails?tourId=' + id);
}
$(document).ready(function () {
DataLoad();
$("#ulGenres li a").on("click", function () {
// Get text from anchor tag
var id = $(this).data('pdsa-dropdown-val');
$("#TourId").val(id);
// Add text and caret to the Select button
var text = $(this).text();
$("#selectButton").html(text + ' <span class="caret"></span>');
// Put text into hidden field from model
$("#SelectedText").val(text);
DataLoad();
});
var id = $("#TourId").val();
$("#ulGenres li a").filter("[data-pdsa-dropdown-val=" + id + "]").trigger("click");
//$("#ulGenres li:first-child a").trigger("click");
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<input id="TourId" type="text" value="2" />
<div class="dropdown">
<button class="btn btn-primary" id="selectButton" data-toggle="dropdown">
Arrangement
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" id="ulGenres">
<li>
<a href="#" data-pdsa-dropdown-val="1">Item 1</a>
</li>
<li>
<a href="#" data-pdsa-dropdown-val="2">Item 2</a>
</li>
<li>
<a href="#" data-pdsa-dropdown-val="3">Item 3</a>
</li>
</ul>
</div>