Управление статусом выбора в мульти-выборе с помощью кнопок «выбрать все» и «выбрать нет». Ванильные кнопки JavaScript отлично работают на рабочем столе, но не на мобильных устройствах (проверено только на Android).
Я не нашеллюбое решение Vanilla JS в Интернете.Поскольку мое устройство Android отображает параметры в виде флажков, я попытался установить флажок check = 'true';на параметры [], отдельные элементы и как часть класса.Я также попытался заменить selected = 'false' на selected = 'true' с помощью innerHTML.
HTML:
<div class='form-group'>
<label for='columns'>Columns: </label><br>
<button id='all_columns' class='btn btn-sm text-white'>all</button>
<button id='clear_columns' class='btn btn-sm text-white'>none</button>
<select multiple id='columns' class='form-control'>
<option value='0'>Timestamp</option>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
<option value='3' selected='true'>Option2</option>
<option value='4' selected='true'>Option3</option>
</select>
</div>
JS для кнопки выбора всех
if (document.getElementById("all_columns")){
function all_columns(){
var elements = document.getElementById("columns").options;
for(var i = 0; i < elements.length; i++){
elements[i].selected = true;
}
}
document.getElementById("all_columns").addEventListener('click', all_columns);
}
Я бы ожидал, что мобильная реализация, которая отображает все опции в виде флажков во всплывающем окне, все еще будет в состоянии манипулировать простым javascript - но пока мне не повезло.Единственное, что я обнаружил, чтобы поставить галочку в поле, это поставить «выбранный» в теге параметров (или selected = «true», как описано выше, когда я попытался заменить решение innerHTML.)
Благодарность заесть идеи;Я предпочитаю не перезагружать страницу, поскольку пользователь теряет свое место на странице, но в худшем случае учел бы это.