Home / Questions / 332586
Accepted
Rafael Monroy Rodriguez
Asked: 2020-02-27 13:59:05 +0800 CST 2020-02-27 13:59:05 +0800 CST

Open modal with a select

  • 772

Hello , I am trying to open a modal through a selectand I have the following codehtml

<select id = "numbers" onchange = "myFunction()">
 <option value = "1">1</option>
 <option value = "2">2</option>
 <option value = "3">Click me !</option>
</select>

<div class="container">
 <h2>Basic Modal Example</h2>
 <!-- Trigger the modal with a button -->
 <!-- Modal -->
 <div class="modal fade" id="myModal" role="dialog">
   <div class="modal-dialog">
   <!-- Modal content-->
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times; 
      </button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data- 
     dismiss="modal">Close</button>
    </div>
  </div>

</div>

And the function javascriptthat I am using is the following:

function myFunction() {
var option_value = document.getElementById("numbers").value;
if (option_value == "3") {
    alert("Hai !");
 }
}

The problem is that when choosing option 3 it shows me a alert, what I am looking for is to show a modal made with boostrap, I tried to put a instead of alerta $('#myModal').modal('show');but when choosing nothing came out, how else could I do it?

Thanks.

javascript

2 Answers

  1. Best Answer

    I add the solution you just have to modify the content of your modal

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<script>
function myFunction() {
var option_value = document.getElementById("numbers").value;
if (option_value == "3") {
  //  alert("Hai !");
   $("#myModal").modal();
 }
}
   

</script>
<select id = "numbers" onchange = "myFunction()">
 <option value = "1">1</option>
 <option value = "2">2</option>
 <option value = "3">Click me !</option>
</select>
<div class="container">
  <h2>Basic Modal Example</h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

    • 1

  2. It works by calling the modal with the show method... check if your modal is in the same document, or if there is an external call, it would also be convenient for you to integrate jquery into your project. This works

       <select class="custom-select" id="test">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

   $("#test").click(function() {
        var option_value = document.getElementById("test").value;
        if (option_value == "3") {
            //alert("Hai !");
         $('#TU_MODAL').modal('show');

         }

    })
    • 1