Set select option 'selected', by value for model pop up - php

Question

I have an edit button
<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>
The value of data-assign is like this:
1,2,3
I want to split the values and selected dropdown menu. I tried to iterate through the loop using the value in a dynamic selector that utilizes the attribute selector.
$('.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>
I can't set this value to multiple select drop down. Any help would be appreciated.

Answer 1

This could be simply achieved using the this keyword and .val() method.
NOTE 1: Make sure the inline-event onclick isn't the source of the conflit here.
NOTE 2: If the anchor is created dynamically you should use event delegation on() like :
$('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>