Bootstrap下拉列表在模式内不起作用

Question

Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered

I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my 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

Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution

EDIT: The modal code

    <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>

Thanks

Answer 1

I assume you use the jQuery.Chosen plugin. Here's the code:

 $(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> 

Reference: chosen with bootstrap 3 not working properly

Answer 2

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