Выбор свойства выпадающего курсора Select2 - PullRequest
Новая
       8

Выбор свойства выпадающего курсора Select2

0 голосов
/ 31 августа 2018

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

var newDataMap = {};
for (var i in payload) {
    newDataMap[payload[i]data.year] = payload[i].data;
}

var year_html = '<option value = "all">All Years</option>';

for (var i in finYearTag) {
    Object.keys(newDataMap).forEach(function eachKey(key) { 
        if(key == i) {
            year_html += '<option value = "' + i + '"style = "cursor: pointer">' +   finYearTag[i].name + '</option>';
        }
        else {
            year_html += '<option value = "' + i + '"style = "cursor: default">' + finYearTag[i].name + '</option>';
        }
    });
}

$('#filterYear').html(year_html);
<select class="filt" id="filterYear" style="width: 180px;"></select>

Опции выбора заполняются динамически с помощью select2 и работают нормально. Я просто не могу изменить стиль курсора, как задумано. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 31 августа 2018

Вы можете смоделировать поле выбора, не нуждаясь в плагине select2. Я смоделировал варианты с / без данных, используя класс. Надеюсь, что это верная альтернатива.

Я много документировал в исходном коде. Дайте мне знать, если будут какие-либо вопросы. 

const hasClass = (element, cls) => {
  return (element.className).indexOf(cls) > -1;
}

const toggleSelect = (target) => {
  const neighbor = target.nextElementSibling; // Get reference to options list
  neighbor.classList.toggle("open"); // Show options
}

const selectedOption = (target) => {
  const value = target.innerHTML; // Read HTML selected option
  const selectedText = document.getElementsByClassName("selected")[0];
  selectedText.innerHTML = value; // Set selected option in select box
  const hiddenInput = document.getElementById("sel");
  hiddenInput.value = value; // Set selected option in hidden input field
  toggleSelect(selectedText); // Hide options
}
/*
  A single event listener is added to the document. Once anything is clicked, it is
  determined if any action needs to be taken.
  
  This works also if any data is loaded dynamically.
*/
document.addEventListener('click', (event) => {

  if (event.target.matches('.selected')) {
    toggleSelect(event.target);
  }

  if (event.target.matches('.has-data')) {
    selectedOption(event.target);
  }

}, false);
.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li:not(.has-data) {
  cursor: default;
  color: lightgray;
}

li>img {
  margin-right: 1em;
}
<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div class="selected">Select an option</div>
    <ul class="options">
      <li class="option has-data">Option 1</li>
      <li class="option">Option 2</li>
      <li class="option has-data">Option 3</li>
    </ul>
  </div>
</form>
...