Установите опцию select «selected», по значению для всплывающей модели

Question

У меня есть кнопка редактирования

<a href="javascript:;" class="btn-sm btn-primary pull-right edit" data-token="{{ csrf_token() }}"  data-id="{{$menus->id}}" data-title="{{$menus->title}}"  data-assign="{{$menus->assigned_to}}" onclick="Test({{$key}})">
  <i class="voyager-edit"></i> Edit
</a>

Значение data-assign выглядит следующим образом:

1,2,3 

Я хочу разделить значения и выбранное выпадающее меню.Я попытался перебрать цикл, используя значение в динамическом селекторе, который использует селектор атрибута.

$('.edit').click(function(e) {  
  var id = $(e.currentTarget).data('id'); 
  var assign = $(e.currentTarget).data('assign');

  $.each(assign.split(","), function(i, e) { 
    $("#framework1 option[value='" + e + "']").prop("selected", true);
  });   
});

<select id="framework1" name="Roles[]" multiple class="form-control">
  @foreach($roles as $id=>$name)
    <option value="{{$id}}">{{$name}}</option>
  @endforeach    
</select>

Я не могу установить это значение в раскрывающемся списке множественного выбора.Любая помощь будет оценена.

Answer 1

Этого можно достичь, используя ключевое слово this и метод .val().

ПРИМЕЧАНИЕ 1: Убедитесь, что встроенное событие onclick не является источникомКонфликт здесь.

ПРИМЕЧАНИЕ 2: Если якорь создается динамически, вы должны использовать делегирование события on(), например:

$('body').on('click', '.edit', (function() {

$('.edit').click(function() {
  $("#framework1").val($(this).data('assign').split(","));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="javascript:;" class="btn-sm btn-primary pull-right edit" data-assign="1,2,3">
  <i class="voyager-edit"></i> Edit
</a>
<br><br>
<select id="framework1" multiple>
  <option value="1">Big Island</option>
  <option value="2">Oahu</option>
  <option value="3">Kauai</option>
  <option value="4">Maui</option>
</select>