如何在Laravel上使用Selected JQuery插件

如何在Laravel Html/Forms上使用选定的JQuery插件，我完全是初学者，有人可以向我解释一下，每一步一步，

我已经使用作曲家安装了选定的插件
我应该声明更多吗？

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

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

确保添加选定的 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>

相关内容

最新更新

热门标签：