-1
Benutzerdefinierte Select Vanille JS
const selectMenu = document.querySelector('#custom-select'),
selectionInput = document.querySelector('#input-field'),
dropdown = document.querySelectorAll('.dropdown'),
dropdownArray = Array.prototype.slice.call(dropdown,0),
button = document.querySelector('a[data-toggle="dropdown"]'),
menu = document.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
// Event callback function:
function clickHandler(evt) {
evt.preventDefault();
menu.classList.toggle('show');
menu.classList.toggle('hide');
arrow.classList.toggle('open');
arrow.classList.toggle('close');
let targ = evt.target;
if (menu.contains(targ)) {
selectionInput.value = targ.dataset.optvalue;
}
}
// 'Click' event registration:
selectMenu.addEventListener('click', clickHandler, false);
// Purely your code below:
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};.text-center {
text-align: center;
}
*,
*:before,
*:after {
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
.container {
width: 350px;
margin: 50px auto;
}
.container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.title {
font: normal 40px/1.4 'Pacifico', sans-serif;
text-align: center;
color: #2980B9;
}
.dropdown a { text-decoration: none; }
.dropdown [data-toggle="dropdown"] {
position: relative;
display: block;
color: white;
background: #2980B9;
-webkit-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
-moz-box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
box-shadow: 0 1px 0 #409ad5 inset,
0 -1px 0 #20638f inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; }
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: #fff;
top: 14px;
right: 10px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
}
.dropdown .icon-arrow:before { content: '\25BC'; }
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li { padding: 0; }
.dropdown .dropdown-menu li a {
display: block;
color: #6f6f6f;
background: #EEE;
-webkit-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
-moz-box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
box-shadow: 0 1px 0 white inset,
0 -1px 0 #d5d5d5 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show,
.dropdown .hide {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}<div class="container">
<label for='input-field'>Selection: </label>
<input type='text' id='input-field' value='' />
<br /><br />
<ul id='custom-select'>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Select Item
<i class="icon-arrow close"></i>
</a>
<ul class="dropdown-menu hide">
<li><a href="#" data-optValue="Option 1">Option 1</a></li>
<li><a href="#" data-optValue="Option 2">Option 2</a></li>
<li><a href="#" data-optValue="Option 3">Option 3</a></li>
<li><a href="#" data-optValue="Option 4">Option 4</a></li>
</ul>
</li>
</ul>
</div>Gibt es eine Möglichkeit "Select Item" Text mit ".dropdown-Menü eines" Text nach Auswahl einer Option zu ersetzen. Wie wenn ich Option 4 wähle, wird "Element auswählen" durch "Option 4" ersetzt. Eigentlich schlug mir ein Mitglied von Stackoverflow vor, dies mit der Eingabe zu verwenden, damit wir den Wert speichern können. Aber er hat DD vergessen, den Text zu ändern. Also hier ist das Problem wieder.
Fügen Sie einfach 'Drop-Down [0] .children [0] = .textContent targ.textContent' in Ihrem' if (menu.contains (Targ)) {... ' – DavidDomain
Sie könnte auch 'targ.parentElement.parentElement.previousElementSibling.textContent = targ.textContent;' ausführen, um sicherzustellen, dass die aktuelle Auswahl ausgewählt wird, falls Sie mehrere haben. – DavidDomain
Eigentlich hast du recht. Es funktioniert nicht, wenn ich 2 oder mehr Felder mit unterschiedlicher ID erstelle. Die Box-Dropdown-Option funktioniert nicht, wenn ich 2 Felder anlege. Können Sie mir bitte mit dem Code helfen? – Anirban