[英]bootstrap drop down set selected value
我有一个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>
我想设置所选项目
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");
});
这不会选择所需元素的正确元素
$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")
只需更换:
$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")
同
$("#ulGenres li a").filter("[data-pdsa-dropdown-val=" + id + "]")
工作范例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.