Chosen 在我的 Bootstrap/JQuery 应用程序中不起作用？

Question

我尝试实现chosen JQuery 选择，但由于某种原因，我只在表单输入字段上看到小方块。这是一个例子：

$(document).ready(function() {
  $(".chzn-select").chosen();
});

<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<div class="row">
  <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#permissionModal">
       <span class="glyphicon glyphicon-plus-sign"></span> Add Permission
    </button>
  </div>
</div>
<div id="permissionModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="permission_modalHeader">Permission Modal</h4>
      </div>
      <div class="modal-body table-responsive" id="permission_modalBody">
        <form name="frmSavepermission" id="frmSavepermission" class="frm-permissionSubmit" autocomplete="off">
          <input type="hidden" class="form-control" name="frmSavepermission_recordid" id="frmSavepermission_recordid">
          <div class="form-group required">
            <label class="control-label" for="access"><span class="label label-primary">Access:</span></label>
            <select class="form-control chzn-select" name="frm_access" id="frm_access" required>
              <option value="">--Choose--</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
            </select>
          </div>
          <div class="row">
            <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
              <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我不确定是否缺少某些文件或我没有正确触发选择。如果有人知道如何解决这个问题，请告诉我。

Answer 1

您可以在初始化时在选项中设置自定义宽度支持，使用width:"100%"。 Mode info can be found here

$(document).ready(function() {
  $(".chzn-select").chosen({width:"100%"});
});

<!---*** Start: JQuery 3.3.1 version and chosen files. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<!---*** End: JQuery 3.3.1 version and chosen files. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript" src="Bootstrap_Confirmation/bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->

<div class="row">
  <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#permissionModal">
       <span class="glyphicon glyphicon-plus-sign"></span> Add Permission
    </button>
  </div>
</div>
<div id="permissionModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="permission_modalHeader">Permission Modal</h4>
      </div>
      <div class="modal-body table-responsive" id="permission_modalBody">
        <form name="frmSavepermission" id="frmSavepermission" class="frm-permissionSubmit" autocomplete="off">
          <input type="hidden" class="form-control" name="frmSavepermission_recordid" id="frmSavepermission_recordid">
          <div class="form-group required">
            <label class="control-label" for="access"><span class="label label-primary">Access:</span></label>
            <select class="form-control chzn-select" name="frm_access" id="frm_access" required>
              <option value="">--Choose--</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
            </select>
          </div>
          <div class="row">
            <div class="form-group col-xs-12 col-sm-12 col-md-1 col-lg-1">
              <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>