bootstrap drop down set selected value

Question

I have a Bootstrap drop down list

<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 + '&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");
});

This does not select the correct the element the wanted element

$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")

Answer 1

Just replace:

$("#ulGenres li a").data("[pdsa-dropdown-val= " + id + "]")

with

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