javascript - How to open a Bootstrap Modal on change of select Box - Stack Overflow

admin管理员组

文章数量:1023009

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

This is My Modal

<!-- Modal when adding ment 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 = "mentsUpload"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?

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

This is My Modal

<!-- Modal when adding ment 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 = "mentsUpload"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?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 29, 2017 at 14:23 Tareque Md Hanif 8733 silver badges1414 bronze badges asked Mar 29, 2017 at 13:37 Geek_To_LearnGeek_To_Learn 1,97677 gold badges2929 silver badges5151 bronze badges 8

• any error you received in console ? – RAJNIK PATEL Commented Mar 29, 2017 at 13:41
• Other than a missing semicolon at the end '.modal('show')', your code seems to be ok. Can you provide a working fiddle of the issue. – Dan Philip Bejoy Commented Mar 29, 2017 at 13:42
• works fine: codeply./go/hMooZk56uc – Carol Skelly Commented Mar 29, 2017 at 13:43
• 1 have you add bootstrap js and css library ?? – RAJNIK PATEL Commented Mar 29, 2017 at 13:45
• did you load jquery: because your code works - fiddle – birdspider Commented Mar 29, 2017 at 13:46

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 1

just tried your code and it seem working

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

try it here

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

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

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

This is My Modal

<!-- Modal when adding ment 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 = "mentsUpload"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?

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

This is My Modal

<!-- Modal when adding ment 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 = "mentsUpload"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?

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Mar 29, 2017 at 14:23 Tareque Md Hanif 8733 silver badges1414 bronze badges asked Mar 29, 2017 at 13:37 Geek_To_LearnGeek_To_Learn 1,97677 gold badges2929 silver badges5151 bronze badges 8

• any error you received in console ? – RAJNIK PATEL Commented Mar 29, 2017 at 13:41
• Other than a missing semicolon at the end '.modal('show')', your code seems to be ok. Can you provide a working fiddle of the issue. – Dan Philip Bejoy Commented Mar 29, 2017 at 13:42
• works fine: codeply./go/hMooZk56uc – Carol Skelly Commented Mar 29, 2017 at 13:43
• 1 have you add bootstrap js and css library ?? – RAJNIK PATEL Commented Mar 29, 2017 at 13:45
• did you load jquery: because your code works - fiddle – birdspider Commented Mar 29, 2017 at 13:46

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 1

just tried your code and it seem working

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

try it here

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

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

本文标签： javascriptHow to open a Bootstrap Modal on change of select BoxStack Overflow