Question

我在ERB中有两个选择器。他们使用Chosen插件：

<%= select_tag :provinces, 
  options_for_select(DataHelper::all_provinces_captions.zip(DataHelper::all_provinces_ids)), 
  {:multiple => true, class: 'chosen-select chzn-select', 
  :data => {:placeholder => 'Filter Provinces/States'}}
%>
  <%= f.select :province_ids,
  (DataHelper::all_provinces_captions.zip(DataHelper::all_provinces_ids)),
  { include_blank: true }, 
  {multiple: true, data: {placeholder: 'Filter Provinces/States'} }
%>

我正在尝试将选项从其中一个选择器复制到另一个选项器，同时保持所选选项仍处于选中状态，但它无法正常工作。这是我尝试过的Javascript函数：

var selectedVals = [];

$(".chzn-select").chosen().change(function() {
  $("#provinces option:selected").each(function () {
    console.log ("this value is " + ($(this).val()));
    selectedVals.push($(this).val());
  });
  $("#education_plan_province_ids").empty();
  for (var i = 0; i < selectedVals.length; i++) {
    console.log (selectedVals[i] + " selected");
    $("#education_plan_province_ids").append($("<option>" + selectedVals[i] + "</option>").attr('selected', true));
  }
  selectedVals = [];
});

attr('selected', true)还有其他替代方案吗？

Answer 1

你走了：

$(".chzn-select").chosen().change(function() { 
    $("#education_plan_province_ids").empty(); 
    $("#provinces option:selected").each(function () {
         $("#education_plan_province_ids").append($("<option>" + this.value + "</option>").prop('selected', true)); 
    });
});

我在这里使用prop并删除额外的数组（我认为不需要，但如果你愿意，可以使用它）。你在option的错误位置也有括号。

将选定的选项附加到选择器

1 个答案: