我有多个选择like the following

但是我现在需要将其显示为普通的“下拉”选择,因为我的网站上有许多普通选择,如果选择的大小大于1,这看起来就很奇怪。

因此,多重选择也应look like here

我不想包括一个额外的jQuery插件或其他东西。我正在寻找一个简单的html / css / js解决方案。

最佳答案

我做了一个快速的类(纯JavaScript),该类应具有您期望的行为。您可能需要添加更多功能。

编辑:更新了代码,忘记了你想要一个下拉菜单

https://jsfiddle.net/xLtfsgbd/1/

 ( function()
{

  var MultipleSelectDropDown = function()
  {
   // constructor
  }

  MultipleSelectDropDown.prototype =
  {
    options: [],
    selected: [],
    size: 0,
    displayed: false,

    add: function(element)
    {
      this.options.push(element);
      this.size = this.size + 1;
    },

    remove: function(element)
    {
      for(var stored in this.options)
      {
        if(this.options[stored] == element)
        {
          this.options.splice(stored, 1);
          this.size = this.size - 1;
          break;
        }
      }
    },

    render: function(onIdSelector)
    {
      var container = document.getElementById(onIdSelector);
      if(typeof container == 'undefined')
      {
        window.alert('The list container is undefined!')
        return;
      }

      var mainDiv = document.createElement('div');
      mainDiv.setAttribute('style', 'width:300px; height: 50px display:block;');
      var firstItem = document.createElement('div');
      firstItem.setAttribute('style', 'width:250px; height:25px;');
      firstItem.appendChild(document.createTextNode(this.options[0]));
      var dropDownArrow = document.createElement('img');
      dropDownArrow.setAttribute('src', 'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-128.png');
      dropDownArrow.setAttribute('style', 'width:25px; height:25px;');

      _self = this;
      dropDownArrow.onclick = function(e)
      {
          if(_self.displayed)
          {
                _self.displayed = false;
              var displayedList = document.getElementById('daList');
              document.body.removeChild(displayedList);
          }
          else
          {
                var rect = this.getBoundingClientRect();
            _self.renderList(rect.left, rect.top);
                        _self.displayed = true;
          }
      };

      firstItem.appendChild(dropDownArrow);

      mainDiv.appendChild(firstItem);
      //mainDiv.appendChild(dropDownArrow);
      container.appendChild(mainDiv);
    },

    renderList: function(x, y)
    {
        var div = document.createElement('div');
      div.setAttribute('id', 'daList');
      div.setAttribute('style', 'positon:absolute; top:'+y+'; left:'+x+'; height:100px; width:200px; overflow-y:scroll; background-color:#fff;');
        var list = document.createElement('ul');

      var _self = this;
      for(var stored in this.options)
      {
        var option = this.options[stored];
        var listItem = document.createElement('li');
        listItem.setAttribute('index', stored);
        listItem.appendChild(document.createTextNode(option));

        listItem.onclick = function(e)
        {
          var index = this.getAttribute('index');
          if(index < 0 || index > _self.size)
          {
            return;
          }

          var selected = this.getAttribute('selected');
          // Item not selected
          if(selected == null || selected == '' || selected == 'false')
          {
            this.setAttribute('selected', 'true');
            this.setAttribute('style', 'background-color:#0099ff;');
            selected.push(option);
          }
          else // Item selected
          {
            this.setAttribute('selected', 'false');
            this.setAttribute('style', 'background-color:#fff;');

            for(var sel in _self.selected)
            {
                if(_self.selected[sel] == option)
                {
                  _self.selected.splice(sel, 1);
                }
            }
          }
        };

        list.appendChild(listItem);
      }

      div.appendChild(list);
      document.body.appendChild(div);
    }
  }
  SelectDrop = MultipleSelectDropDown;
})();

09-17 16:49
查看更多