select2未正确显示，如select2示例页面中所示

Question

我正在使用带有Laravel刀片引擎的select2，我将它用于loading remote data，它的工作正常(从远程获取数据)，但它看起来不像select2盒子。我还为生成的select2附加了图像。

我的CSS文件包含在以下部分中

     {{--Bootstrap--}}
{{ HTML::style('css/bootstrap.css') }}
{{ HTML::style('css/bootstrap.min.css') }}
{{ HTML::style('css/plugin/font-awesome.min.css') }}
    {{--select2--}}
{{ HTML::style('css/plugin/select2/select2.min.css') }}
{{ HTML::style('css/plugin/select2/select2-bootstrap.css') }}

我的Js文件在body标签后包含如下内容

{{ HTML::script('js/jquery.min.js') }}

{{ HTML::script('js/bootstrap.min.js') }}

{{ HTML::script('js/plugin/select2/select2.min.js') }}

{{ HTML::script('js/plugin/select2/select2.js') }}

我的HTML代码

<input type="hidden"  id="student-name-search"
 data-placeholder="Select Student" value="" data-option="" style="width:100%">  </input>

图像

enter image description here

Answer 1

您必须在HTML中使用select输入，如下所示：

$(document).ready(function() {
  $(".js-example-basic-single").select2();
});

<select class="js-example-basic-single">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>