CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Geek_To_Learn
Geek_To_Learn

Reputation: 1956

How to open a Bootstrap Modal on change of select Box

I am trying to open a modal on the change event of select Box?

This is My Modal

<!-- Modal when adding comment for upload -->
  <div class="modal fade" id="fileUploadModal" 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">Add Comment</h4>
        </div>
        <div class="modal-body">
          <p><textarea id = "commentsUpload"class="form-control custom-control" rows="3" style="resize:none"></textarea></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" onclick="submitXYX()" data-dismiss="modal">Submit</button>
        </div>
      </div>
    </div>
  </div>

And select Box is:

<select class="selectpicker" id = "selectNEWBox">
    <option value = "1">New</option>
    <option value = "2">Old</option>
    <option value = "3">Scrap</option>
</select>

What I need to do is to open the Modal on change event of select Box.

What I have tried

In $(document).ready(function () {});

Approach 1

$("#selectNEWBox").change(function(){
    $('#fileUploadModal').modal({
    show: true
  });
});

Approach 2

$("#selectNEWBox").change(function (){
    $('#fileUploadModal').modal('show');
});

but these are not working.

Am I missing something?

Upvotes: 0

Views: 13154

Answers (2)

Geek_To_Learn
Geek_To_Learn

Reputation: 1956

Finally resolved the issue. It seems the issue was because of conflict of Jquery versions.

Removed the conflict and it's working now. :)

Upvotes: 0

rick
rick

Reputation: 1895

just tried your code and it seem working

$( "#selectNEWBox" ).change(function() {
  $('#fileUploadModal').modal('show')
});

try it here

Upvotes: 1

Related Questions