Question

我尝试了以下方法：

$('select').change(function () {
  var addProj = $('select option:selected').val();
  if(addProj === 'addthis'){
    $('#myModal').modal();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<select>
  <option>addthree</option>
  <option>addtwo</option>
  <option>addthis</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">&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>

它在开始时起作用，但稍后，当我选择时，在我单击模态窗口后关闭，然后我从所选选项中选择并再次单击，没有模态窗口显示。

即使选择了模态窗口，如何激活模态窗口？

Answer 1

如果我理解正确，您需要首先初始化modal，但不要通过传递选项show:false来显示它。

如果要显示它（例如select值等于addthis，则调用插件方法show。

全文：

var modal = $('#myModal').modal({
  show: false  
});

$('select').change(function () {
  var addProj = $('select option:selected').val();
  if(addProj === 'addthis'){
    modal.modal('show');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<select>
  <option>addthree</option>
  <option>addtwo</option>
  <option>addthis</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">&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>

Answer 2

代码问题是onChange事件处理程序用于选择选项。

当您选择第一次“添加”时，onchange功能会被触发。下次选择“addthis”时，不会调用此函数，因为值未更改。当您选择“addtwo”然后打开“addthis”模型时。

如果您想在第二次点击“addthis”时打开模态，则需要在模态关闭时将选项值更改为“addtwo”或“addthree”。

你的代码

$('#mySelect').change(function () {
  var addProj = $('select option:selected').val();
  if(addProj === 'addthis'){
    modal.modal('show');
  }
});

$('#my-modal').on('#myMdal', function () {
     $('#mySelect').val("addtwo");
});



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

<select id="mySelect">
  <option>addthree</option>
  <option>addtwo</option>
  <option>addthis</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">&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>

如何再次使用select时使用bootstrap 3激活模态窗口？

2 个答案: