将 select 框的功能绑定到自定义 select 框

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 的自定义下拉列表或 select 框 3，现在我想要的是绑定功能select 框（数据表 select 框）到我的自定义下拉列表或 select 框（bootstrap）。例如，如果我从我的自定义 select 框中单击具有 10 的选项，那么数据表的 select 框也将触发其功能。如何让它发挥作用？

如有任何帮助或建议，我们将不胜感激。谢谢。

到目前为止，我尝试了以下操作：

$('.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

获取数据表 select 的 class，并向自定义 select 框上的 onclick 添加一个函数，用于设置数据表 select 中的值。调用触发器并手动触发select事件。

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

})

Answer 2

像这样尝试，在您的 select 下拉列表中附加一个 change 事件，然后将 select 的值与您的 bootstrap select 元素相匹配：

$("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

将 select 框的功能绑定到自定义 select 框

bind the function of the select box to a custom select box

javascript

jquery

datatables

jquery-datatables