связать функцию выбора коробки на заказ поле выбора

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 плагин от 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

Update:

Противоположно, вы можете написать примерно так:

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

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

WORKING DEMO 2

Answer 2

Получить класс выбора данных и добавить функцию к onclick в свой пользовательский selectbox, который устанавливает значение в выборе данных datatables. Вызовите триггер и вручную активируйте событие select.

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

})