CODEWITHSUNDEEP
jquerytwitter-bootstrap
brunodd
brunodd

Reputation: 2584

Bootstrap - How to show modal box using option from select?

How can I enable modal box on Bootstrap using <option> from <select> I tried the default way but it's not working.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

<select class="form-control">
    <option>select</option>
    <option data-toggle="modal" data-target="#myModal">Second Option</option>
</select>

See my example for a better clarification.

Upvotes: 3

Views: 21103

Answers (1)

Shehary
Shehary

Reputation: 9992

Still not sure why OP insisting fiddle in question not working where I can see it's working may be I have too much coffee today :)

Quick solution is assign id to <select> in HTML <select class="form-control" id="myselect">

<select class="form-control" id="myselect">
    <option value="">select</option>
    <option value="secondoption">Second Option</option>
</select>

Add value in select options and taking advantage of jQuery Change Function get value of Second Option and use Comparison Operators to compare value and if value true, can open the modal with Bootstrap JS Modal via JavaScript.

$(document).ready(function(){ //Make script DOM ready
    $('#myselect').change(function() { //jQuery Change Function
        var opval = $(this).val(); //Get value from select element
        if(opval=="secondoption"){ //Compare it and if true
            $('#myModal').modal("show"); //Open Modal
        }
    });
});

Fiddle

Upvotes: 8

Related Questions