我有多个选择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;
})();