2016-07-30 5 views
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> 

答えて

0

あなた<option>タグが正しく一致</option>タグで閉じられていません。

あなたのコードは次のようになります。

    <option value="apple" disabled>apple</option> 
        <option value="mango">mango</option> 
        <option value="banana">banana</option> 
関連する問題