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中的datatables插件和bootstrap 3中的自定义下拉列表或选择框，现在我想要的是将选择框（datatables selectbox）的功能绑定到我的自定义下拉列表或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

获取数据表的类选择，并在自定义选择框上的onclick中添加一个函数，该函数设置数据条选择中的值。调用触发器并手动触发选择事件。

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

})

Answer 2

尝试这样，在选择下拉列表中附加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

将选择框的功能绑定到自定义选择框

2 个答案: