Материализация CSS Выбор нескольких - Как ограничить количество выборов без jQuery - PullRequest
Новая
       21

Материализация CSS Выбор нескольких - Как ограничить количество выборов без jQuery

0 голосов
/ 10 марта 2020

Я впервые работаю с Materialz ie CSS и, надеюсь, я сделал хороший выбор легких css фреймворков. Новейшая версия 1.0.0 не требует jQuery в качестве зависимости, и поэтому я только что инициализировал Materialize с помощью: 

document.addEventListener('DOMContentLoaded', function() {
var instances = M.AutoInit();
});

Моя проблема заключается в попытке ограничить количество параметров, которые может выбрать пользователь используя выпадающий список. Я видел несколько примеров, которые ссылаются на jQuery, но ни один из них не использует нативную материализацию js. Вот мой выпадающий код: 

<form>
<div class="input-field">
<select name="test" id="seltest" multiple>
<option value="" disabled >Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<label>Materialize Multiple Select</label>
</div>
</form>

Так каков самый простой способ подключиться к выбору и ограничить количество опций, которые может выбрать пользователь? В основном это проблема клиента / пользовательского интерфейса, так как у меня также будет серверный код для проверки количества выборов в бэкэнде. Но должен быть изящный способ отменить выбор опции, если пользователь пытается выбрать больше, чем разрешено. Все с использованием материализации. js, а не jQuery.

Большое спасибо и люблю изучать этот новый css каркас.

1 Ответ

0 голосов
/ 10 марта 2020

Надеюсь, что эта помощь 

$('#seltest').material_select();

function selectbox(select) {
  var result = [];
  var options = select && select.options;
  var meterial_select = document.getElementsByTagName("li");
  var opt;

  for (var i = 0, iLen = options.length; i < iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }

  for (var j = 0; j < options.length; j++) {
    (result.length >= 3 && !options[j].selected) ? options[j].disabled = true: options[j].disabled = false;
    (result.length >= 3 && !options[j].selected) ? meterial_select[j].classList.add("disabled"): meterial_select[j].classList.remove("disabled");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<form>
  <div class="input-field">
    <select name="test" id="seltest" onChange='selectbox(this)' multiple>
      <option value="" disabled>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
    </select>
    <label>Materialize Multiple Select</label>
  </div>
</form>

Вы.

...