リスト項目をクリックしたときのdivの値を変更する方法は？

Question

私はドロップダウンリストを作成しましたが、私は完全に満足していません。私は、クリックされたリスト項目の値を使ってデフォルト状態の値を変更する方法に苦労しています。

HTML：

<div class="dropdown"> 
    <input class="dropdown-toggle" type="text"> 
    <div class="dropdown-text">Account</div> 
    <ul class="dropdown-content"> 
    <li><a href="#">Settings</a></li> 
    <li><a href="#">Projects</a></li> 
    <li><a href="#">Log out</a></li> 
    </ul> 
</div> 

そしてJS私が使用しています：

var ddl = document.getElementByClass('dropdown-content'); 
var opts = ddl.options.length; 
for (var i=0; i<opts; i++){ 
    if (ddl.options[i].value == "some-value"){ 
     ddl.options[i].selected = true; 
     break; 
    } 
} 

これは動作しませんし、私はその理由を取得することはできません。 JavaScriptの初心者です。私はあなたがクリックしたもので、ドロップダウンリストで "Account"を変更したいと思います。ここで

はフィドルです：

https://jsfiddle.net/xrqas38n/

PS：私はjQueryのを使用する必要はありません。ここで

Answer 1

はそれを行うための一つの方法である：

var current_item = document.querySelector('.dropdown-text'); 
 
var items = document.querySelectorAll('.dropdown-content > li > a'); 
 
items.forEach(function(item) { 
 
    item.addEventListener('click', selectionChanged); 
 
}); 
 

 
function selectionChanged(e) { 
 
    e.preventDefault(); 
 
    var target = e.currentTarget; 
 
    current_item.innerHTML = target.innerHTML; 
 
}

a { 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: left; 
 
    width: 132px; 
 
} 
 

 
.dropdown-text { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    text-indent: 10px; 
 
    line-height: 32px; 
 
    background-color: #eee; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1); 
 
    width: 100%; 
 
} 
 

 
.dropdown-text:after { 
 
    position: absolute; 
 
    right: 6px; 
 
    top: 15px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 5px 4px 0 4px; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
.dropdown-text, 
 
.dropdown-content a { 
 
    color: #333; 
 
    text-shadow: 0 1px #fff; 
 
} 
 

 
.dropdown-toggle { 
 
    font-size: 0; 
 
    z-index: 1; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 0; 
 
    border: none; 
 
    padding: 0; 
 
    margin: 0 0 0 1px; 
 
    background: transparent; 
 
    text-indent: -10px; 
 
    height: 34px; 
 
    width: 100%; 
 
} 
 

 
.dropdown-toggle:focus { 
 
    outline: 0; 
 
} 
 

 
.dropdown-content { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    top: 32px; 
 
    padding: 0; 
 
    margin: 0; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    border-radius: 3px; 
 
    text-indent: 10px; 
 
    line-height: 32px; 
 
    background-color: #eee; 
 
    border: 1px solid #ccc; 
 
    width: 140px; 
 
} 
 

 
.dropdown-content a { 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background: #e8e8e8; 
 
} 
 

 
.dropdown-toggle:hover ~ .dropdown-text, 
 
.dropdown-toggle:focus ~ .dropdown-text { 
 
    background-color: #e8e8e8; 
 
} 
 

 
.dropdown-toggle:focus ~ .dropdown-text { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, 0.8); 
 
    z-index: 2; 
 
} 
 

 
.dropdown-toggle:focus ~ .dropdown-text:after { 
 
    border-width: 0 4px 5px 4px; 
 
    border-color: transparent transparent #555 transparent; 
 
} 
 

 
.dropdown-content:hover, 
 
.dropdown-toggle:focus ~ .dropdown-content { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 42px; 
 
}

<div class="dropdown"> 
 
    <input class="dropdown-toggle" type="text"> 
 
    <div class="dropdown-text">Account</div> 
 
    <ul class="dropdown-content"> 
 
    <li><a href="#">Settings</a></li> 
 
    <li><a href="#">Projects</a></li> 
 
    <li><a href="#">Log out</a></li> 
 
    </ul> 
 
</div>

Answer 2

var ddl = document.getElementsByClassName('dropdown-content')[0]; 
 
var items = ddl.getElementsByTagName("li"); 
 
for (var i = 0; i < items.length; ++i) { 
 
    items[i].onclick=function(){ 
 
    var text=this.childNodes[0].innerHTML; 
 
    document.getElementsByClassName('dropdown-text')[0].innerHTML=text; 
 
    } 
 
}

a { 
 
    text-decoration: none; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: left; 
 
    width: 132px; 
 
} 
 

 
.dropdown-text { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    text-indent: 10px; 
 
    line-height: 32px; 
 
    background-color: #eee; 
 
    border: 1px solid #ccc; 
 
    border-radius: 3px; 
 
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1); 
 
    width: 100%; 
 
} 
 

 
.dropdown-text:after { 
 
    position: absolute; 
 
    right: 6px; 
 
    top: 15px; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 5px 4px 0 4px; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
.dropdown-text, 
 
.dropdown-content a { 
 
    color: #333; 
 
    text-shadow: 0 1px #fff; 
 
} 
 

 
.dropdown-toggle { 
 
    font-size: 0; 
 
    z-index: 1; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 0; 
 
    border: none; 
 
    padding: 0; 
 
    margin: 0 0 0 1px; 
 
    background: transparent; 
 
    text-indent: -10px; 
 
    height: 34px; 
 
    width: 100%; 
 
} 
 

 
.dropdown-toggle:focus { 
 
    outline: 0; 
 
} 
 

 
.dropdown-content { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    top: 32px; 
 
    padding: 0; 
 
    margin: 0; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    border-radius: 3px; 
 
    text-indent: 10px; 
 
    line-height: 32px; 
 
    background-color: #eee; 
 
    border: 1px solid #ccc; 
 
    width: 140px; 
 
} 
 

 
.dropdown-content a { 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background: #e8e8e8; 
 
} 
 

 
.dropdown-toggle:hover ~ .dropdown-text, 
 
.dropdown-toggle:focus ~ .dropdown-text { 
 
    background-color: #e8e8e8; 
 
} 
 

 
.dropdown-toggle:focus ~ .dropdown-text { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset, 0 1px 0 rgba(255, 255, 255, 0.8); 
 
    z-index: 2; 
 
} 
 

 
.dropdown-toggle:focus ~ .dropdown-text:after { 
 
    border-width: 0 4px 5px 4px; 
 
    border-color: transparent transparent #555 transparent; 
 
} 
 

 
.dropdown-content:hover, 
 
.dropdown-toggle:focus ~ .dropdown-content { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 42px; 
 
}

<div class="dropdown"> 
 
    <input class="dropdown-toggle" type="text"> 
 
    <div class="dropdown-text">Account</div> 
 
    <ul class="dropdown-content"> 
 
    <li><a href="#">Settings</a></li> 
 
    <li><a href="#">Projects</a></li> 
 
    <li><a href="#">Log out</a></li> 
 
    </ul> 
 
</div>