Question

我希望将没有任何数据的选项值的游标属性从指针更改为默认值。我为它制作了一张地图，其中跟踪选项值和其中的数据内容。这是我的代码的样子：

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动态填充选择选项，并且可以正常工作。我只是无法获得预期的光标样式更改。请帮忙。

Answer 1

您可以模拟一个选择框，不需要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>

Select2下拉光标属性更改

1 个答案: