How to show modal box using option from select?

Open Modal from Select – How to call modal popup on select option or open when select dropdown menu. Open Bootstrap Modal Popup based on DropDownList selected value in jQuery.

HTML

<select class="form-control" id="myselect">
    <option value="">select</option>
    <option value="openPopup">Open Modal Popup</option>
</select>

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=="openPopup"){ //Compare it and if true
            $('#myModal').modal("show"); //Open Modal
        }
    });
});

//Use the id of the form instead of #change.
$('#change'). change(function(){
//this is just getting the value that is selected.
var title = $(this). val();

Example

<select class="form-control" id="change">
    <option value="">select</option>
    <option value="selectuser">Open Modal Popup</option>
</select>
<select class="form-control" id="landingPage">
    <option value="">select</option>
    <option value="newLandingPage">Open Modal Popup</option>
</select>

<script>
    $(document).ready(function(){
        $('#change').change(function() {
            var opval = $(this).val();
            if(opval=="selectuser"){ 
                $('#newUserGroup').modal("show");
            }        
        });

        $('#landingPage').change(function() {
            var opval = $(this).val();
            if(opval=="newLandingP"){
                $('#newLandingPage').modal("show");
            }          
        });
    });
  </script>

Bootstrap Modal Popup

 <!-- Modal -->
<div class="modal fade" id="newUserGroup" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

 <!-- Modal -->
<div class="modal fade" id="newLandingPage" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>

Change Function()

<select name='type' id='type'>
<option value='suggestions'>Suggestions</option>
<option value='inquiries'>Inquiries</option>
<option value='donations'>Donations</option>
</select>

$("#type").on("change", function () {        
    $modal = $('#myModal');
    if($(this).val() === 'donations'){
        $modal.modal('show');
    }
});

You can customize this code further as per your requirement.

---

Learn HTML/CSS from W3 School Website

• JavaScript