CODEWITHSUNDEEP
javascriptjquerydatatables
Juliver Galleto
Juliver Galleto

Reputation: 9047

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

I have the following HTML structure:

<!-- 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>

As you can see above, I use datatables plugin from datatables.net and a custom dropdown or select box from bootstrap 3, now what I want is to bind the function of the select box (datatables selectbox) to my custom dropdown or selectbox (bootstrap). For example, if I click the option that has 10 from my custom select box then also the select box of the datatables will trigger its function. How to make it work?

Any help or suggestion would be greatly appreciated. Thank you.

So far, I have tried following:

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

But it is not working.

Upvotes: 2

Views: 891

Answers (2)

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Try like this, attach a change event on your select dropdown and then match the value of select to your bootstrap select element:

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

Oppositely, you can write like this:

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

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

WORKING DEMO 2

Upvotes: 1

Amal Ts
Amal Ts

Reputation: 861

Get the class of the datatables select, and add a function to the onclick on your custom selectbox which sets the value in the datatables select. Call trigger and manually trigger the select event.

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

})

Upvotes: 1

Related Questions