CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Raihan
Raihan

Reputation: 4001

Bootstrap Modals Inside bootstrap-select plugin

I am using bootstrap-select plugin as my Drop down menu.

I was trying to add bootstrap Modal one one of the options of that dropdown. example: 

<select class="selectpicker" data-live-search="true" data-size="false" >
       <option>Team Lead</option>
       <option>Juniour Employee</option>
       <option>Intern</option>
       <option>Director</option>
       <option role="button" data-toggle="modal" data-target="#seg-Seniority">Add/Edit Categories..</option>

 </select>

But it seems like when I click on the ADD/EDIT where modal is called is not coming. Is this possible to make if ADD/EDIT is clicked the popup will come?

Any help will be appreciated.

Upvotes: 0

Views: 544

Answers (1)

Dhiraj
Dhiraj

Reputation: 33618

I think the only way you can do is by change method for select.

I have this as my option <option data-dismiss="true" data-target="#confirm">Hide modal</option>

This is my script

$('.selectpicker').on('change', function () {
    var selectedOption = $(this).find(":selected");
    // this hides a modal
    if (selectedOption.data('dismiss')) {
        $(selectedOption.data('target')).modal('hide');
    }
    // this shows a modal
    if( selectedOption.data('modal') ){
        $(selectedOption.data('target')).modal('show');
    }
});

DEMO

Hope this helps

Upvotes: 2

Related Questions