Question

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

function add_course()
{
    $('#form')[0].reset(); // reset form on modals
    $('.form-group').removeClass('has-error'); // clear error class
    $('.help-block').empty(); // clear error string
    $('#modal_form').modal('show'); // show bootstrap modal
     $('#modal_form').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
     });  
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>



<button class="btn btn-success" onclick="add_course()"><i class="glyphicon glyphicon-plus"></i>Add Course</button>

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
  <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>
        <h3 class="modal-title">Course Form</h3>
      </div>
      <div class="modal-body form">
        <form action="#" id="form" class="form-horizontal">
          <input type="hidden" value="" name="train_ID" />
          <div class="form-body">
            <div class="col-md-9">
              <div class="side-by-side clearfix">
                Select Department:
                <select name="empdept[]" data-placeholder="Choose department..." class="chosen-select" multiple style="width:350px;" tabindex="4">
                  <option value="IT">IT</option>
                  <option value="Finance">Finance</option>
                  <option value="Production">Production</option>
                  <option value="HR">HR</option>
                </select>
              </div>
              <span class="help-block"></span>
  </div>           
</div>
<!-- /.modal -->
<!-- End Bootstrap modal -->

大家好，请帮我解决这个问题。

我在bootstrap模式上有一个选择的选择它工作正常但在我选择一个项目之后它会消失。

继承我的屏幕截图when modal loaded

以及我选择it disappear

后发生的事情

继承我的代码：它在这里工作，但在我的网站上它不起作用..

选择一个值后，在引导模态上选择了选择

0 个答案: