Show a Bootstrap Modal If Option Is Selected

Show a bootstrap modal if option is selected

You try this way..

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

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

<script src="https://code.jquery.com/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><select name='type' id='type'><option value='suggestions' >Suggestions</option><option value='inquiries' >Inquiries</option><option value='donations' >Donations</option></select><!-- Modal -->    <div id="myModal" class="modal fade" role="dialog">      <div class="modal-dialog">
        <!-- Modal content-->        <div class="modal-content">          <div class="modal-header">            <button type="button" class="close" data-dismiss="modal">×</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>

Show a bootstrap modal if option is selected or else open url

Simpler solution - test the first char for being an ID:

$(function() {
  $('#designselectedchange').on('change', function() {
    var val = $(this).val();
    if (val) {
      if (val.indexOf("#") === 0) $(val).modal('show');
      else window.location = val;
    };
  });
});

<select title="Select Design" class="selectpicker" id="designselectedchange" name="design">
  <option value="/frequently-asked-questions/index.html">pop up</option>
  <option value="#LoginRegister">Login modal</option>
</select>

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

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

Show modal bootstrap when click button if the null select option

use e.stopPropagation();

$('#addFilter').click(function (e) { // add argument
        if($('#category_id').val() === ''){
            alert("Please select a location.");
            e.stopPropagation(); // add this line 
            return false;
        }
    });

You can show modal manually.

var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop'), {
  keyboard: false
})
myModal.show()

Show Bootstrap Modal Window based on select (DropDown) value

If the values of your select options is the relevant selector (#modalId) of the modal, you can use:

$("#selectbox").change(function () {
    $( $(this).val() ).modal('show');
})

How can I open bootstrap modal on select box option change?

I have the correct solution that you have been waiting for.
Please look at this code :

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

<!DOCTYPE html><html><head><script>// Add the above javascript code here !</script></head><body><select id = "numbers" onchange = "myFunction()"><option value = "1">1</option><option value = "2">2</option><option value = "3">Click me !</option></select></body></html>

Select Option, Show Bootstrap Modal, Confirm Delete Then Delete from Database Via Ajax

I don't think you can use data attributes on option tag to open the modal. Instead you can open the modal using JavaScript.

After you select the delete option, you need to store the selected ID somewhere. In my demo, we store the ID in a variable.

$(function() {
  // we'll use this to hold current ID   var idToDelete;    $('.all_options').on('change', function() {    // check selected value (since you didn't specify value attribute to your options, it will use the text)    if (this.value == 'Delete') {      // store the ID to access it later e.g. variable or hidden input      idToDelete = this.dataset.id;      console.log('clicked Delete option: set idToDelete=' + idToDelete);
      // open modal      $('#modal_box').modal('show');    }  });    // no need to attach (and re-attach) click event handler inside the change event handler b/c the modal is already available in the DOM when the page loads  $('#confirm-delete').click(function () {    console.log('clicked Delete button: get idToDelete=' + idToDelete);    // call AJAX   });});

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

<!-- ids are only supposed to appear once in the DOM, so use class if you have multiple of these -->
<!-- data attributes are useful to hold custom data --><select class="all_options" data-id="123">    <option>Edit</option>    <option>Delete</option></select>
<select class="all_options" data-id="456">    <option>Edit</option>    <option>Delete</option></select>
<select class="all_options" data-id="789">    <option>Edit</option>    <option>Delete</option></select>
<div id="modal_box" class="modal fade" role="dialog" style="display:none;">  <div class="modal-dialog">
    <!-- Modal content-->    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal">×</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 id="cancel_delete" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>        <button id="confirm-delete" name="confirm_delete" type="button" class="btn btn-primary">Delete</button>
      </div>    </div>
  </div></div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>