动态分配“选择”属性到jQuery select2下拉列表

时间:2019-07-25 15:28:14

标签: php jquery html foreach jquery-select2

我正在处理jquery select2下拉列表。我必须在选择区域中显示多个选择的选项。为此,我循环遍历每个select2。如果满足条件,我将为“选项”分配“选定”属性,以便它可以出现在选择区域中。 但是以某种方式select2无法显示所选的”。

HTML代码:

<div class="form-group col-md-12">
    <label for="inputsskill">Skill<span class="required-field">*</span></label>
         <fieldset>
              <select class="custom-select w-100" name="skill_name[]" id="skill_name" multiple="multiple" style="width: 100%;">
               @if(!$skills->isEmpty())
                   @foreach($skills as $skill)
                      <option value="{{$skill->id}}">{{$skill->name}}</option>
                   @endforeach
               @endif
             </select>
         </fieldset>
 </div>

JQUERY代码:

// parse skills
var parseData = JSON.parse(skill);
// parseData is an array which contain 1,2,3 values like ['1','2','3']
$("#skill_name > option").each(function() {
// if select2 and array values matches assign selected attribute to that option
    if( $.inArray($(this).val(), parseData) !== -1 ) {
        $(this).attr('selected', 'selected');
    }
});

Select2 jQuery:

$( "#skill_name" ).select2({
});

我不知道我要去哪里错了,如果有人在这方面指导我,我将不胜感激。 谢谢,

1 个答案:

答案 0 :(得分:0)

您可以使用PHP轻松实现此功能。 例如:从您要预选的数据库中获取技能并创建一系列技能。然后在您的循环中匹配它。就像

var msg = OnMessageReceive();
Console.WriteLine(msg.Result);

尝试这个。

jQuery解决方案

 <div class="form-group col-md-12">
        <label for="inputsskill">Skill<span class="required-field">*</span></label>
             <fieldset>
                  <select class="custom-select w-100" name="skill_name[]" id="skill_name" multiple="multiple" style="width: 100%;">
                   @if(!$skills->isEmpty())
                       @foreach($skills as $skill)
                          <option value="{{$skill->id}}" <?php
                            if(in_array($skill->name, $selectedskillsArray)){
                                   echo $selected = 'selected';
                                }
                            ?> >{{$skill->name}}</option>
                       @endforeach
                   @endif
                 </select>
             </fieldset>
     </div>