Question

Select2不起作用。我没有看到任何效果。我需要在Select2中应用“多选框（药盒）”样式。

我正在使用引导程序4。我认为这是问题所在。

我到目前为止已经尝试过的内容如下所示，

PHP

<div class="form-group" >        
  <label for="exampleFormControlInput">Tags</label>
  <select multiple class="form-control tags">  >  <!-- Multiple To Select more than one but need press ctrl+select -->

              @foreach ($tags as $tagname)

              <option>{{$tagname->tag}}</option>

           @endforeach

  </select>

脚本

<script type="text/javascript">

${(function() {
    $('.tags').select2();
});

</script>

Answer 1

首先请确保已导入css和javascript文件

这是我的观点，我在供应商中使用了select2。

<label>Vendor <span style="color: red">*</span></label>
<select class="form-control" name="vendor_id" required="required" id="vendor">
    <option value="">Select Vendor</option>
    @if($vendors)
        @foreach($vendors as $key => $value)
            <option value="{{ $value->id }}">{{ $value->name }}</option>
        @endforeach
    @endif
</select>

您可以看到我声明了一个id，因为我将在select2中使用它。请参阅下面的代码，了解如何在供应商中实现select2。

$('#vendor').select2({
        placeholder: "Select Vendor" // you can change this
    });

如果您想在select2上进行一些事件，请在这里输入我的代码。

$(document).on('select2:select', '#vendor', function(e){
                var id = $(this).val();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                })
                $.ajax({
                    url: '/purchases/purchase-orders/getVendorTerms',
                    type: "POST",
                    data: {id:id},
                    success: function(response) {
                        if (response != '') {
                            $('#terms').val(response.term);
                        }else{
                            $('#terms').val('');
                        }
                        editGetGoodThru();
                    }
                });
            })

Answer 2

Select2取决于包含的js的顺序，请尝试按以下顺序包含它们。像jQuery-> jQuery UI-> Bootstrap-> Select2。

Select2在引导程序4和laravel中不起作用

2 个答案: