doubt select with modal

Question

doubt select with modal

Navigation

#1 by (0 votes)

2

I'm having trouble performing an action on my site. I have a select with some options, I need to select one of the options and give submit on a button, doing so would have to open a modal popup?

That is, I selected the option, clicked on the "send" button and it opens the specific modal of the selected option.

I'm doing this in WordPress and using Bbootstrap

Modal HTML:

<div id="sintomas">
	<div class="options">
		<select class="custom-select custom-sintomas">
			<option selected>Selecione um sintoma aparente</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

javascript html css bootstrap

asked by anonymous 09.03.2018 / 13:53

1 answer

Permutations of integers Infinite loop in the on_message method

score 0 · Accepted Answer

You can detect with JQuery the value of the option when you select one of the options and open the specific modal as follows

        $('select').change(function () {

           $('[id^="modal"]').modal('hide');

           var qualModal = "#modal"+$(this).val();

           $(qualModal).modal('show');

        });

Example:

    	$('select').change(function () {
    	
    	   $('[id^="modal"]').modal('hide');
    	   
    	   var qualModal = "#modal"+$(this).val();

    	   $(qualModal).modal('show');

    	});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divid="sintomas">
    	<div class="options">
    		<select class="custom-select custom-sintomas">
    			<option selected>Selecione um sintoma aparente</option>
    			<option value="1">One</option>
    			<option value="2">Two</option>
    			<option value="3">Three</option>
    		</select>
    	</div>
    </div>

    <!-- Modal 1-->
    <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title 111111</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          1111111111
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
          
        </div>
      </div>
    </div>

    <!-- Modal 2-->

    <div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title 222222</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            2222222222
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
          
        </div>
      </div>
    </div>

     <!-- Modal 3-->

    <div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title 333333</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            3333333333
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
             
        </div>
      </div>
    </div>

With button opening specific modal

$( document ).ready(function() {
    $('select').change(function () {

       $('[id^="modal"]').modal('hide');

       var targetBotao = "#modal"+$(this).val();

       $('#testButton').attr('data-target',targetBotao);

    });
});

When you select a select option the data-target of the button will assume the value of the targetBotao variable that will be composed of the #modal string concatenated by the value of the selected option. That way when clicked will open the specific modal.

Example:

$( document ).ready(function() {
	$('select').change(function () {
	   
	   $('[id^="modal"]').modal('hide');
	   
	   var targetBotao = "#modal"+$(this).val();
	
	   $('#testButton').attr('data-target',targetBotao);

	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divid="sintomas">
	<div class="options">
		<select class="custom-select custom-sintomas">
			<option selected>Selecione um sintoma aparente</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
<!-- Button trigger modal -->
<button type="button" id="testButton" class="btn btn-primary" data-toggle="modal" data-target="">
  Launch demo modal
</button>
	</div>
</div>

<!-- Modal 1-->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 111111</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      1111111111
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

<!-- Modal 2-->

<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 222222</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        2222222222
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

 <!-- Modal 3-->

<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 333333</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        3333333333
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
         
    </div>
  </div>
</div>

About data attributes - *