Форум

Pavel_G · #1 (**permalink**) 21.08.2014, 11:34

Добрый день, не могу разобраться как реализовать функционал.

Есть список ссылок с именами сотрудников организации

<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'е он был выбран.

Спасибо

skrudjmakdak · #2 (**permalink**) 21.08.2014, 11:37

ваш код с модальным окном, пожалуйста

Pavel_G · #3 (**permalink**) 21.08.2014, 11:45

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

Pavel_G · #4 (**permalink**) 21.08.2014, 11:47

вот код

skrudjmakdak · #5 (**permalink**) 21.08.2014, 12:36

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

Pavel_G · #6 (**permalink**) 21.08.2014, 21:13

Спасибо, огромное)

Pavel_G · #7 (**permalink**) 21.08.2014, 21:16

А можно этот код не на прототипе а на jQuery?)) не охота тащить в проект еще одну библиотеку

skrudjmakdak · #8 (**permalink**) 22.08.2014, 08:08

Сообщение от Pavel_G

не охота тащить в проект еще одну библиотеку

какую библиотеку? код написан на чистом js

skrudjmakdak · #9 (**permalink**) 22.08.2014, 08:13

а сами пробовали, кода еще меньше и проще:

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

Pavel_G · #10 (**permalink**) 22.08.2014, 13:36

я не могу понять по какой причине, но не работает( вот адрес где пробую http://techbio.ru/ слева от телефона 'напишите нам'

Форум

Справочник

Discord чат

Курсы javascript