selected при клике на ссылку
Добрый день, не могу разобраться как реализовать функционал.
Есть список ссылок с именами сотрудников организации
<ul class="writetous__list">
<li class="writetous__item">
<a class="fancybox writetous__link" href="#write-to-us">Александр Иванов</a>
<span class="writetous__position">Директор</span>
</li>
.....
<li class="writetous__item">
<a class="fancybox writetous__link" href="#write-to-us">Наталья Колобашкина</a>
<span class="writetous__position">Административный помощник директора</span>
</li>
</ul>
приклике на каждое имя вызывается модальное окно с формой, в которой есть select со всеми именами <select id="write-to-us-destination" class="select" name="destination"> <option> Александр Иванов </option> <option> Наталья Колобашкина </option> <option> Ольга Маркова </option> <option> Андрей Дюкар </option> <option> Светлана Пашаева </option> <option> Алексей Костенко </option> <option> Александр Ефремов </option> <option> Ольга Сорокина </option> <option> Марина Соснина </option> <option> Юлия Усачева </option> </select> Подскажите как реализовать так, чтоб при клике например на Александр Иванов в списке, при открытии модального окна в select'е он был выбран. Спасибо |
ваш код с модальным окном, пожалуйста
|
<div class="modal write-to-us" id="write-to-us" style="display: block;">
<h2>Напишите нам</h2>
<form class="form" method="POST">
<div class="form-group">
<label for="write-to-us-destination">Адресат:</label>
<select class="select" name="destination" id="write-to-us-destination" style="display: none;">
<option>
Александр Иванов
</option>
<option>
Наталья Колобашкина
</option>
<option>
Ольга Маркова
</option>
<option>
Андрей Дюкар
</option>
<option>
Светлана Пашаева
</option>
<option>
Алексей Костенко
</option>
<option>
Александр Ефремов
</option>
<option>
Ольга Сорокина
</option>
<option>
Марина Соснина
</option>
<option>
Юлия Усачева
</option>
</select>
<div class="form-group">
<label for="write-to-us-subject">Тема сообщения:</label>
<input type="text" placeholder="Введите тему сообщения" name="subject" id="write-to-us-subject">
</div>
<div class="form-group">
<label for="write-to-us-message">Текст сообщения:</label>
<textarea placeholder="Введите текст сообщения" name="message" id="write-to-us-message"></textarea>
</div>
<div class="form-group">
<label for="write-to-us-name">Ваше имя и фамилия*:</label>
<input type="text" placeholder="Введите имя и фамилию" name="name" id="write-to-us-name">
</div>
<div class="form-group form-block">
<div class="form-group-sm">
<label for="write-to-us-mail">Адрес вашей эл. почты*:</label>
<input type="text" placeholder="Введите адрес эл. почты" name="mail" id="write-to-us-mail">
</div>
<div class="form-group-sm">
<label for="write-to-us-phone">Ваш телефон*:</label>
<input type="text" placeholder="Введите телефон" name="phone" id="write-to-us-phone">
</div>
</div><small>*Мы не храним ваши личные данные и не передаём их третьим лицам.</small>
<button class="button" type="submit">Отправить</button>
</form>
</div>
|
вот код:)
|
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<ul class="writetous__list">
<li class="writetous__item">
<a class="fancybox writetous__link" href="#write-to-us">Александр Иванов</a>
<span class="writetous__position">Директор</span>
</li>
<li class="writetous__item">
<a class="fancybox writetous__link" href="#write-to-us">Наталья Колобашкина</a>
<span class="writetous__position">Административный помощник директора</span>
</li>
</ul>
<form>
<select>
<option> Александр Иванов </option>
<option> Наталья Колобашкина </option>
<option> Ольга Маркова </option>
<option> Андрей Дюкар </option>
<option> Светлана Пашаева </option>
<option> Алексей Костенко </option>
<option> Александр Ефремов </option>
<option> Ольга Сорокина </option>
<option> Марина Соснина </option>
<option> Юлия Усачева </option>
</select>
</form>
<script>
var select = document.querySelector('select');
Array.prototype.forEach.call(document.querySelectorAll('li'), function (ths)
{
ths.onclick = function ()
{
select.value = this.children[0].innerHTML;
}
});
</script>
</body>
</html>
|
Спасибо, огромное)
|
А можно этот код не на прототипе а на jQuery?)) не охота тащить в проект еще одну библиотеку
|
Цитата:
|
а сами пробовали, кода еще меньше и проще:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<ul class="writetous__list">
<li class="writetous__item">
<a class="fancybox writetous__link" href="#write-to-us">Александр Иванов</a>
<span class="writetous__position">Директор</span>
</li>
<li class="writetous__item">
<a class="fancybox writetous__link" href="#write-to-us">Наталья Колобашкина</a>
<span class="writetous__position">Административный помощник директора</span>
</li>
</ul>
<form>
<select>
<option> Александр Иванов </option>
<option> Наталья Колобашкина </option>
<option> Ольга Маркова </option>
<option> Андрей Дюкар </option>
<option> Светлана Пашаева </option>
<option> Алексей Костенко </option>
<option> Александр Ефремов </option>
<option> Ольга Сорокина </option>
<option> Марина Соснина </option>
<option> Юлия Усачева </option>
</select>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var select = $('select');
$('li').click(function ()
{
select.val($(this).find('a').html());
});
</script>
</body>
</html>
|
я не могу понять по какой причине, но не работает( вот адрес где пробую http://techbio.ru/ слева от телефона 'напишите нам'
|
| Часовой пояс GMT +3, время: 06:26. |