Çoklu seçimli like the following var.Çoklu görünüm normal görünüm olarak seçin
Ama benim şimdi ihtiyacım web sitemde birçok Normal seçer olduğundan, seçmek "drop" normal gibi göstermektir ve boyut fazla 1.
yüzden üstünde gidecekseniz seçilmiş ise çok tuhaf görünüyor Çoklu seçim de look like here olmalıdır.
Ekstra jQuery eklentisi veya başka bir şey eklemek istemiyorum. Kolay bir html/css/js çözümü arıyorum.
İstediğiniz gibi davranması gereken hızlı bir sınıf (salt JavaScript) yaptım. Büyük olasılıkla daha fazla işlevsellik eklemek isteyeceksiniz.
DÜZENLEME: kodunu Güncelleme, olamaz, sen bir eklenti olmadan bir açılan
(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;
})();
Cevabınız için teşekkürler .. Bu başlangıç için iyi bir başlangıç – ZerOne
Ne sormak basitçe mümkün değildir olduğunu. Hedef görünümünüz, web tarayıcısı tarafından oluşturulan bir seçim kutusudur. Aynı şekilde işlenecek çoklu seçimleri değiştiremezsiniz. Kullanıcı birden çok öğe nasıl seçer?
kullanılabilirlik nedenleriyle şiddetle başka bir çözüm bakarak öneririz . Çoklu seçimler, kullanıcıların anlaması için gerçekten serttir. Daha fazla kullanılabilir çözüm bir grup onay kutularını kullanmak olacaktır.
Ya WebAIM states it olarak
:Birden seçme menüleri kaçınılması önerilir. Tüm tarayıcılar, çoklu seçim menüleri için sezgisel klavye navigasyonu sağlamaz. Birçok kullanıcı, birden çok öğe seçmek için CTRL/Command veya Shift + tıklamalarını kullanmayı bilmemektedir. Tipik olarak, bir dizi onay kutusu seçeneği benzer, ancak daha erişilebilir bir işlevsellik sağlayabilir. kullanılabilirlik basıp birden ilişkin
Daha örneğin bakınız:
, çoklu kütüphaneler vardır bir özel deneyim yaratan gibi https://github.com/bsara/multi-select-dropdown.js (bağımlılık yok)
Bunu neden düşürmeyi tercih ettiğinizi açıklamaktan çekinmeyin. –
https://jsfiddle.net/xLtfsgbd/1/
istediğini unuttu. Eklentiler, yerel seçim öğesini gizler ve –@ MarcosPérezGude ile bir "açılır" oluşturur. Eklenti düzenli JS ile yapar. –
Eğer