Как изменить значение 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. Я хочу изменить «Учетную запись» с тем, что вы нажимаете, в раскрывающемся списке.

Вот Fiddle:

https://jsfiddle.net/xrqas38n/

PS: Я не хочу использовать JQuery.

источник

2016-12-12 Siyah

Divs не имеют значения. У них есть innerHTML или атрибуты данных или className s - вы, вероятно, хотите изменить имя класса на «selected» или что-то – mplungjan

Для начала не просто создавайте методы dom. Это 'getElementsByClassName'. И что такое 'options'? – 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 при нажатии на некоторый элемент списка?

ответ

Смежные вопросы