Question

我尝试使用Laravel为我的应用程序实现Select2。

我正在尝试构建一个用户可以列出其技能的系统（如php，html5，css等）。

对于没有预加载的select2，绝对可以正常工作：

 <select name="skills[]" 
         data-placeholder="Select Your Skills..." multiple 
         class="select2 form-input col-md-10" 
         id="skills">

        @foreach($skills as $skill)
          <option value="{{$skill->id}}">{{$skill->title}}</option> 
        @endforeach
  </select>                                     
  <script>
      $(document).ready(function() { $("#skills").select2(); });
   </script>

或者当我尝试简单地预加载选项时。但是当我尝试让用户编辑他们的技能列表时，问题就出现了。当他们进入编辑屏幕时，我想要预先获得他们已有的技能，然后为他们提供可用的选项。

PRELOAD与select2一起正常工作：

<input type="hidden" id="skills" style="width:300px;"/>
<script>
    var preload_data = [
     <?php foreach($skills as $skill){ ?>
       { id:<?php echo $skill->id; ?>, text: <?php echo $skill->title; ?>},
     <?php } ?>
    ];

    $(document).ready(function () {
    $('#skills').select2({
    multiple: true
    ,query: function (query){
    var data = {results: []};

    $.each(preload_data, function(){
       if(query.term.length == 0 || 
this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0 ){
    data.results.push({id: this.id, text: this.text });
    }
    });

    query.callback(data);
    }
    });
    $('#skills').select2('data', preload_data )
</script>

所以，基本上，我正在寻找一个解决方案，我可以并排使用这两个。输入框将显示所选的现有技能，然后用户将能够从列表中选择新技能。

这是我的技能表：

--------------------------------------------------
id | title | description | created_at |updated_at
--------------------------------------------------
1  | PHP   |Web Artisans | 2014-03-16 | 2014-03-16
--------------------------------------------------

如果有人能够启发我，我将不胜感激。

提前多多感谢！

选择2预加载并一起显示选项

0 个答案: