There are two lists, a drop-down list and a list of items with checkboxes. It is necessary that when selecting elements from the second, the corresponding elements were selected in the first. Moreover, if after loading the page in the first one the elements have already been selected, then in the second they should also be with checkboxes.

I know that the main thing that is needed is .change(function() but in an hour nothing good came to mind.

How to tie until I can not imagine ..

 $('.form-type-checkbox').change(function() { }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <select multiple="multiple" name="field_akctest_tid[]" id="edit-field-akctest-tid" size="3" class="form-select valid"> <option value="821">Акции</option> <option value="822">Мероприятия</option> <option value="823">Розыгрыши</option> </select> <div class="form-type-checkbox"> <label class="option"> <input type="checkbox" value="821" class="form-checkbox">Акция</label> <label class="option"> <input type="checkbox" value="822" class="form-checkbox">Мероприятие</label> <label class="option "> <input type="checkbox" value="823" сlass="form-checkbox">Розыгрыш</label> </div>

  • Well, think not an hour, but two-three-four. Why run to ruSO right away? - Alexey Shimansky
  • not right away. I know the way but not universal. Probably as it can be linked, the value of both lists, but here I’m generally empty. - Yevgeny Shevtsov

2 answers 2

Updated

Here it is not necessary to think, it’s enough to rummage around the key "jquery select select":

 $(function() { $('.form-type-checkbox input:checked').each(function(index, el) { var val = $(this).val(); $("#edit-field-akctest-tid option[value=" + val + "]").attr('selected', true); }); $('.form-type-checkbox input').change(function() { var val = $(this).val(); if ($(this).prop('checked') == true) { $("#edit-field-akctest-tid option[value=" + val + "]").prop('selected', true); } else { $("#edit-field-akctest-tid option[value=" + val + "]").prop('selected', false); } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select multiple="multiple" name="field_akctest_tid[]" id="edit-field-akctest-tid" size="3" class="form-select valid"> <option value="821">Акции</option> <option value="822">Мероприятия</option> <option value="823">Розыгрыши</option> </select> <div class="form-type-checkbox"> <label class="option"> <input type="checkbox" value="821" class="form-checkbox">Акция</label> <label class="option"> <input type="checkbox" value="822" class="form-checkbox">Мероприятие</label> <label class="option "> <input type="checkbox" value="823" сlass="form-checkbox" checked>Розыгрыш</label> </div>

  • In the first part of the script it was necessary the other way around (the second list depends on the first one at boot) but then I figured it out, thank you. - Evgeny Shevtsov

 $('.form-type-checkbox input').change(function() { var y = $(this); $("#edit-field-akctest-tid option").each(function(item, x) { if ($(x).attr("value") == y.val()) { $(x).prop("selected", $(y).prop("checked")); } }) }); $('#edit-field-akctest-tid').change(function() { var y = $("#edit-field-akctest-tid option:selected"); $(".form-type-checkbox input").each(function(item, x) { if ($(x).attr("value") == y.attr("value")) { $(x).prop("checked", $(y).prop("selected")); } }) }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <select multiple="multiple" name="field_akctest_tid[]" id="edit-field-akctest-tid" size="3" class="form-select valid"> <option value="821">Акции</option> <option value="822">Мероприятия</option> <option value="823">Розыгрыши</option> </select> <div class="form-type-checkbox"> <label class="option"> <input type="checkbox" value="821" class="form-checkbox">Акция</label> <label class="option"> <input type="checkbox" value="822" class="form-checkbox">Мероприятие</label> <label class="option "> <input type="checkbox" value="823" сlass="form-checkbox">Розыгрыш</label> </div>

  • Thu does not plow the third option - Jean-Claude
  • @ Jean-Claude changed ... - C.Raf.T