如何在點擊某個列表項時更改div的值？

我已經建立了一個下拉列表，但我並不完全滿意它。我正在努力如何改變默認狀態的值，以及點擊列表項的值。如何在點擊某個列表項時更改div的值？

的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中的新手。我想在下拉列表中點擊任何內容來更改「帳戶」。

這裏是一個小提琴：

https://jsfiddle.net/xrqas38n/

PS：我不想使用jQuery。

來源

2016-12-12 Siyah

的div不具有值。他們有innerHTML或數據屬性或className - 你可能想要將className改爲「selected」或其他東西 – mplungjan

對於初學者來說，不要只是製作dom方法。它是'getElementsByClassName'。還有什麼'選項'？ – Damon

下面是做到這一點的一種方法：

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>

來源

2016-12-12 14:44:51 paulgv

也許與一個e.preventDefault（）添加？ – mplungjan

@mplungjan是的先生！ :) – paulgv

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>

來源

2016-12-12 14:51:44

如何在點擊某個列表項時更改div的值？

回答

相關問題