Question

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

我已经使用composer安装了选定的插件
我应该宣布什么？

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

我如何在这里获得结果？ here

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

如何在Laravel上使用选择的JQuery插件

1 个答案: