Bootstrap 下拉菜单在模态中不起作用

Question

是否有已知原因导致下拉菜单在模态框内不起作用？我正在使用 rails 4，除了模式之外，下拉菜单在整个应用程序中都可以正常工作。这是它的渲染方式

我怀疑这可能是 javascript 的问题，我已尝试更改在 application.js 中包含 javascripts 的顺序，但没有任何效果。这是我的 application.js：

//= require bootstrap
//= require jquery/jquery-2.1.1.js
//= require jquery_ujs
//= require turbolinks
//= require cloudinary
//= require jquery.turbolinks
//= require slimscroll/jquery.slimscroll.min.js
//= require bootstrap-sprockets

以前有人遇到过这种情况吗？有解决办法吗？我尝试过搜索，但找不到任何相关的解决方案

编辑：模式代码

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      `enter code here`<div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add Group</h4>
          </div>


    <div class="modal-body">
        <div class="form-group"><label>Class name</label> <input type="name" placeholder="Choose a name for your group" class="form-control"></div>

<div class="form-group"><label>Class name</label> <input type="desc" placeholder="Add a description for your group" class="form-control"></div>

    <div class="form-group">
                    <label class="font-noraml">Select</label>
                    <div class="input-group">
                    <select data-placeholder="Select a grade..." class="chosen-select" style="width:350px;" tabindex="2">
                    <option value="">Select</option>
                    <option value="Prekindergarten">Prekindergarten</option>
                    <option value="Kindergarten">Kindergarten</option>
                    <option value="1st">1st</option>
                    <option value="2nd">2nd</option>
                    <option value="3rd">3rd</option>
                    <option value="4th">4th</option>
                    <option value="5th">5th</option>
                    <option value="6th">6th</option>
                    <option value="7th">7th</option>
                    <option value="8th">8th</option>
                    <option value="9th">9th</option>
                    <option value="10th">10th</option>
                    <option value="11th">11th</option>
                    <option value="12th">12th</option>
                    <option value="Higher Education">Higher Education</option>
                    </select>
                    </div>
                    </div>
       </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

谢谢

Answer 1

我假设您使用 jQuery.Chosen 插件。代码如下：

$(document).ready(function() {
  $('#myModal').on('show.bs.modal', function(e) {
    console.debug('modal shown!');
    $('.chosen-select', this).chosen({width: "350px"});
  });

  $("#myModal").modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">
            &times;
          </span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
          Add Group
        </h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>
            Class name
          </label>
          <input type="name" placeholder="Choose a name for your group" class="form-control">
        </div>

        <div class="form-group">
          <label>
            Description
          </label>
          <input type="desc" placeholder="Add a description for your group" class="form-control">
        </div>

        <div class="form-group">
          <label class="font-noraml">
            Select
          </label>
          <div class="input-group">
            <select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
              <option value="">
              </option>
              <option value="Prekindergarten">
                Prekindergarten
              </option>
              <option value="Kindergarten">
                Kindergarten
              </option>
              <option value="1st">
                1st
              </option>
              <option value="2nd">
                2nd
              </option>
              <option value="3rd">
                3rd
              </option>
              <option value="4th">
                4th
              </option>
              <option value="5th">
                5th
              </option>
              <option value="6th">
                6th
              </option>
              <option value="7th">
                7th
              </option>
              <option value="8th">
                8th
              </option>
              <option value="9th">
                9th
              </option>
              <option value="10th">
                10th
              </option>
              <option value="11th">
                11th
              </option>
              <option value="12th">
                12th
              </option>
              <option value="Higher Education">
                Higher Education
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">
            &times;
          </span>
        </button>
        <h4 class="modal-title" id="myModalLabel">
          Add Group
        </h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>
            Class name
          </label>
          <input type="name" placeholder="Choose a name for your group" class="form-control">
        </div>

        <div class="form-group">
          <label>
            Description
          </label>
          <input type="desc" placeholder="Add a description for your group" class="form-control">
        </div>

        <div class="form-group">
          <label class="font-noraml">
            Select
          </label>
          <div class="input-group">
            <select data-placeholder="Select a grade..." class="form-control chosen-select" style="width:350px;" tabindex="2">
              <option value="">
              </option>
              <option value="Prekindergarten">
                Prekindergarten
              </option>
              <option value="Kindergarten">
                Kindergarten
              </option>
              <option value="1st">
                1st
              </option>
              <option value="2nd">
                2nd
              </option>

            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>

参考：chosen with bootstrap 3 not working properly

Answer 2

您的代码在我的模态中工作 我认为样式有问题，而不是 JS 检查样式