javascript - bootstrap drop down set selected value - Stack Overflow

admin管理员组

文章数量:1341686

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 + "]")

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 + "]")

• javascript
• jquery
• twitter-bootstrap
• dropdown

Share Improve this question Follow edited Mar 22, 2016 at 10:33 user3559349 asked Mar 22, 2016 at 10:04 FCouplesFCouples 44133 gold badges66 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery./jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn./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./bekihay/edit?html,js

本文标签： javascriptbootstrap drop down set selected valueStack Overflow