引导下拉菜单设置选定值答案

【问题标题】：bootstrap drop down set selected value引导下拉菜单设置选定值
【发布时间】：2016-07-09 03:51:23
【问题描述】：

我有一个 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 + '&nbsp;<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 + "]")

【问题讨论】：

标签： javascript jquery twitter-bootstrap dropdown

【解决方案1】：

只需替换：

$("#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 + '&nbsp;<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>

http://jsbin.com/bekihay/edit?html,js

【讨论】：