如何在 Laravel 上使用 Chosen JQuery 插件答案

【问题标题】：How to use Chosen JQuery plugin on Laravel如何在 Laravel 上使用 Chosen JQuery 插件
【发布时间】：2019-08-29 13:07:26
【问题描述】：

如何在 Laravel Html/Forms 上使用 Chosen JQuery 插件，我完全是初学者，谁能给我解释一下，每一步，

我已经使用 composer 安装了选择的插件
我还应该申报什么？

{  
   {  
      Form::select('weekdays',
      $weekdays,
      null,
      array('name'=>'weekdays[]', 
            'multiple' => 'multiple')
      )
   }
}

我怎样才能得到这里的结果？ here

【问题讨论】：

标签： jquery laravel

【解决方案1】：

确保添加所选的 js 库，

https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css
https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js
https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.proto.js

在你的表单选择框中添加类chosen-select类

{{Form::select('weekdays',$weekdays, null, array('name'=>'weekdays[]', 'multiple' => 'multiple', 'class'=>'chosen-select'))}}

然后在你的脚本中

<script>
    $(document).ready(function () {
      $(".chosen-select").chosen();
   });
</script>

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.proto.js"></script>
  
  
  
  <script>
    $(document).ready(function () {
      $(".chosen-select").chosen();
   });
   
  </script>
</head>
<body>

<div class="container">
  <form class="form-inline" action="/action_page.php">
    <div class="form-group">
      <select name="carlist" class="chosen-select form-control">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

</body>
</html>

【讨论】：

@NurdauletShamilov。现在你可以放弃投票了。如果这个答案有用，那就给个赞吧。