選擇框的功能結合到一個自定義選擇框

Question

我有以下HTML結構：

<!-- data length from datatables, datatables.net --> 
<select> 
    <option>10</option> 
    <option>20</option> 
    <option>30</option> 
</select> 
<!-- custom select box from bootstrap 3 --> 
<div class="btn-group jjx filterentries tp ketchup" title="Click to filter"> 
      <button type="button" class="btn btn-default">Filter Entries</button> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> 
     <span class="caret"></span> 
     <span class="sr-only">Toggle Dropdown</span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">10</a></li> 
     <li><a href="#">20</a></li> 
     <li><a href="#">30</a></li> 
    </ul> 
</div> 

正如你可以在上面看到，我用數據表插件從datatables.net和一個自定義下拉菜單或選擇框從bootstrap 3開始，現在我想要的是將選擇框（datatables selectbox）的功能綁定到我的自定義下拉列表或選擇框（bootstrap）。例如，如果我從自定義選擇框中單擊具有10的選項，那麼數據表的選擇框也會觸發其功能。如何使它工作？

任何幫助或建議將不勝感激。謝謝。

到目前爲止，我曾嘗試以下操作：

$('.dropdown-menu li a').click(function(e){ 
    var dis = $(this).text(); 
    $(this).closest('.btn-group').find('.btn:first-child').text(dis); 
    $('.dataTables_length select option').each(function(){ 
      if(dis === $(this).val()){ 
      $('.dataTables_length .dataTables_length select option').attr("selected", false); 
      $(this).attr("selected", true); 
     } 
    }); 
    e.preventDefault(); 
}); 

但它無法正常工作。

Answer 1

嘗試這樣的，你的選擇下拉附加change事件，然後選擇相應的值匹配您的引導選擇元素：

$("select").change(function(){ 
    var val=$(this).val(); 
    $(".dropdown-menu").find("a").each(function(){ 
     if(val==$(this).text()) 
     $(this).trigger("click"); //trigger the event on li element here 
    });  
}); 

$("a").click(function(){ 
    alert("triggered"); 
}); 

WORKING DEMO 1

更新：

相反，你可以這樣寫：

$("select").change(function(){ 
    alert("triggered"); 
}); 

$("a").click(function(){ 
    var val=$(this).text(); 
    $("select").val(val); 
    $("select").trigger("change"); 
}); 

WORKING DEMO 2

Answer 2

獲取datatables選擇的類，並將函數添加到您的自定義選擇框上的onclick上，該選擇框將值設置爲datatables select。調用觸發器並手動觸發選擇事件。

$(button).click(function(){ 
    $('.datatable_select').val($('.custom_select').val()) 
    document.getElementById(".datatable_select").onchange() 

})