如何在基於

Question

我有兩個multiselectors如下另一種多功能的選擇值的多功能選擇值，使用所選擇的插件的第一個：

<%= 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'}, :style => "width: 100%; height: 100px;"}%> 

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

我想要在:provinces選定的值選擇器，與頁面加載時:province_ids選擇器的選定值相同。這種類似的東西：

$(document).ready(function() { 
    $("#education_plan_province_ids option:selected").each(function() { 
    $("#provinces option[value='"this"']").prop('selected', true); 
    }); 
}); 

除，當然，不工作：d

Answer 1

var updateDropdown = function() { 
 
    $("#provinces option:selected").removeAttr("selected"); 
 
    var educationPlanProvinceIds = $("#education_plan_province_ids").val() 
 
    if (educationPlanProvinceIds) { 
 
    educationPlanProvinceIds.forEach(function(id) { 
 
     $('#provinces option[value="' + id + '"]').prop("selected", true) 
 
    }) 
 
    } 
 
    // chosen needs to know when its underlying select element has been changed 
 
    $("#provinces").trigger("chosen:updated") 
 
} 
 

 
$(document).ready(function() { 
 
    updateDropdown() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<select id="education_plan_province_ids" multiple> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3" selected="true">3</option> 
 
</select> 
 
<select id="provinces" multiple> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select>

Answer 2

你可以嘗試這樣的事情

$(document).ready(function() { 
 
    $("#education_plan_province_ids option:selected").each(function() { 
 
    var val = $(this).val(); 
 
    $("#provinces option[value='"+val+"']").attr('selected','selected'); 
 
    
 
    }); 
 
});

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

 
<select id="education_plan_province_ids" multiple> 
 
    <option value="volvo" >Volvo</option> 
 
    <option value="saab" selected>Saab</option> 
 
    <option value="vw" selected>VW</option> 
 
    <option value="audi" selected>Audi</option> 
 
</select> 
 

 

 
<select id="provinces" multiple> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="vw">VW</option> 
 
    <option value="audi" >Audi</option> 
 
</select>