2016-07-22 79 views
0

我有兩個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

回答

0

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>

+0

有沒有辦法爲此在頁面加載,而不是在特定的變化? –

+0

是啊,如果你不希望無論是選擇的改變,你可以只運行負載來代替。 – larz

+0

變化監聽器裏的功能,您可以相應地改變你的答案?如果您正在使用它包裝(文件)。就緒,然後在函數內部不工作(沒有更多的'this'爲例)。 –

0

你可以嘗試這樣的事情

$(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>

+0

這是接近~~但它不工作,我想是因爲我們正在使用所選庫(我編輯的問題)。 –

+0

它正在獲取的值,只是沒有分配他們的選定的值 –

+0

@KeyanRhm嘗試更新的代碼 – Kld