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>

设置选择选项“选择”，按值弹出模型

1 个答案: