bootstrap thả xuống bộ chọn giá trị

Question

tôi có một danh sách thả xuống 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> 

Tôi muốn thiết chọn mục

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

này không chọn đúng phần tử nguyên tố truy nã

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

Answer 1

Chỉ cần thay thế:

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

với ví dụ

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

làm việc:

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