How to change value of div when clicking on some list item?

Question

I have built a dropdown list, but I am not entirely happy with it. I am struggling with how to change the value of the default state, with the value of the clicked list item.

The 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>

And JS I am using:

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;
    }
}

This doesn't work and I can't get why. Am a newbie in JavaScript. I want to change "Account" with whatever you click on, in the dropdown list.

Here is a Fiddle:

https://jsfiddle.net/xrqas38n/

PS: I don't want to use jQuery.

Answer 1

Here is one way to do it :

 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>