选项HTML，改变SelectBox插件的默认结构

option HTML, change default structure of SelectBox plugin

本文关键字：默认 结构 插件 SelectBox HTML 改变 选项      更新时间：2023-09-26

我在这个编码的世界有点新，所以对我来说，这看起来像一个简单的问题，但我不能解决它。给我这样痛苦的功能是

function _renderOptions() {
  var optionHTML = [];
  $options.each(function(i, itm) {
    var $this = $(this),
      optgroup = $this.parents('optgroup'),
      addlOptClasses = "",
      iconMarkup = "";
    // render optgroups if present in original select
    if (optgroup.length > 0 && $this.prev().length === 0) {
      optionHTML.push('<dt>' + optgroup.attr('label') + '</dt>');
    }
    // if option has a classname add that to custom select as well
    if (itm.className !== "") {
      $(itm.className.split(" ")).each(function() {
        iconMarkup += '<span class="' + this + '"></span>';
      });
    }
    // add selected class to whatever option is currently active
    if (itm.selected && !itm.disabled) {
      _selectedValue = iconMarkup + _truncate($(itm).html());
      addlOptClasses = " " + SELECTED_CLASS;
    }
    // Check for disabled options
    if (itm.disabled) {
      addlOptClasses += " " + DISABLED_CLASS;
    }
    optionHTML.push('<dd class="itm-' + i + ' ' + addlOptClasses + '">' + iconMarkup + itm.innerHTML + '</dd>');
  });
  if ($selectedValue && $selectedValue.get(0) !== null) {
    $selectedValue.html(_selectedValue);
  }
  return optionHTML.join("");
}

我想要的是如果选项有一个类名，相同的类被添加到<dd>的类而不是创建<span>并添加类

从项目中取出类并将其添加到dd元素:optionHTML.push('<dd class="itm-' + i + ' ' + addlOptClasses + ' ' + $(itm).attr("class") + '">' + iconMarkup + itm.innerHTML + '</dd>'); 

function _renderOptions() {
  var optionHTML = [];
  $options.each(function(i, itm) {
    var $this = $(this),
      optgroup = $this.parents('optgroup'),
      addlOptClasses = "",
      iconMarkup = "";
    // render optgroups if present in original select
    if (optgroup.length > 0 && $this.prev().length === 0) {
      optionHTML.push('<dt>' + optgroup.attr('label') + '</dt>');
    }
    // if option has a classname add that to custom select as well
    if (itm.className !== "") {
      $(itm.className.split(" ")).each(function() {
        iconMarkup += '<span class="' + this + '"></span>';
      });
    }
    // add selected class to whatever option is currently active
    if (itm.selected && !itm.disabled) {
      _selectedValue = iconMarkup + _truncate($(itm).html());
      addlOptClasses = " " + SELECTED_CLASS;
    }
    // Check for disabled options
    if (itm.disabled) {
      addlOptClasses += " " + DISABLED_CLASS;
    }
    optionHTML.push('<dd class="itm-' + i + ' ' + addlOptClasses + ' ' + $(itm).attr("class") + '">' + iconMarkup + itm.innerHTML + '</dd>');
  });
  if ($selectedValue && $selectedValue.get(0) !== null) {
    $selectedValue.html(_selectedValue);
  }
  return optionHTML.join("");
}

相关文章：