bootstrap下拉设置选定的值 [英] bootstrap drop down set selected value

问题描述

我有一个Bootstrap下拉列表

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>

我想设置所选项目

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

推荐答案

只需替换：

$（＃ulGenres li a）。data（[pdsa-dropdown-val =+ id +]）

with

$（＃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

这篇关于bootstrap下拉设置选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！