Modal is not appearing on option selection

Modal is not appearing on option selection

I have this modal:

  1. <div class="modal fade" id="details" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  2.     test
  3. </div>


That I want to show when the option "shows details is selected"

  1. <select id="exampleFormControlSelect1">
  2.     <option id="showDetails">Show details</option>
  3.     <option>Notify</option>
  4. </select>

So I have this jquery below, but the modal dont appears. Do you know why?


  2.  $(function() {
  3.             $('#showDetails').change(function(){
  4.                 $('#details').modal('show');
  5.             })

  7.         }


Same issue with:



  1.  $(function() {
  2.             $("#showDetails").on("change", function () {
  3.                 $('#details').modal('show');
  4.             })

  6.         }

And with:
  1. $(function() {
  2.             $("#showDetails").on("change", function () {
  3.                 var showDetails = $(this).val();
  4.                 alert(showDetails);
  5.                 if(showDetails === 'showDetails'){
  6.                     $('#details').modal('show');
  7.                 }

  9.             })

  11.         }