1
JavaScriptで選択オプションメニューをカスタマイズしましたが、問題があります。が無効になっていて、カスタマイズされたオプションメニュー(JavaScript)で機能していません
JavaScriptでこの解決方法が必要です。
<form class="wrapper" action="index.html">
<ul>
<li>
<div class="magneto-combobox">
<select class="combo-box" data-element="combobox">
<option value="apple" disabled>apple</option>
<option value="mango">mango<option>
<option value="banana" >banana<option>
</select>
</div>
</li>
<lil>
<input type="submit" value="submit"/>
</lil>
</ul>
</form>
<script>
var select = document.getElementsByTagName('select');
var customselect = [];
var menu = [];
var items = [];
for(var i = 0 ; i < select.length ; i++) {
if(select[i].getAttribute("data-element") == "combobox") {
option = select[i].getElementsByTagName('option');
menu[i] = document.createElement('ul');
customselect[i] = document.createElement('div');
customselect[i].className = select[i].className;
select[i].parentNode.appendChild(customselect[i]);
select[i].parentNode.appendChild(menu[i]);
for(var j = 0 ; j < option.length; j++) {
items[j] = document.createElement('li');
menu[i].appendChild(items[j]);
menu[i].childNodes[j].innerText = option[j].value;
menu[i].previousSibling.innerText = option[0].value;
option[j].selected = true;
if(!select[i].getAttribute('disabled')) {
items[j].onmousedown = itemSelected;
}
}
}
}
function itemSelected() {
var prevsibling = this.parentNode.previousSibling;
var firstchild = this.parentNode.parentNode.firstChild;
var option = firstchild.getElementsByTagName('option');
prevsibling.innerText = this.innerText;
firstchild.value = prevsibling.innerText;
document.getElementById('demo').innerText = firstchild.value;
}
</script>