Select2 dropdown cursor property change

Question

I wish to change the cursor property from pointer to default for option values which doesn't have any data. I made a map for the same which keeps a track of option values and the data content in it. This is how my code looks:

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>

The select options are populated dynamically using select2 and are working fine. I am just not able to get the cursor style change as intended. Please help.

Answer 1

You could simulate a select box, not needing the select2 plugin. I simulated options with/without data using a class. Hope this offers a valid alternative.

I documented a lot in the source code. Let me know should there be any queries.

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>