Как сделать активным пункт меню в выпадающем списке при клике на ссылку в теле странице?

@GarayLeha · Регистрация: 05.02.2019

Студворк — интернет-сервис помощи студентам

Добрый день, Уважаемые форумчане!
Перерыл весь интернет, но ответа на свой вопрос не нашел.
Вообщем:
Есть всплывающая пошаговая форма на сайте с выпадающими списками реализованными через

HTML5

<ul>
   <li>Пункт 1</li>
   <li>Пункт 2</li>
   <li>Пункт 3</li>
</ul>

и есть в теле страницы ссылки

HTML5

1
2
3

<a href="">ссылка 1</a>
<a href="">ссылка 2</a>
<a href="">ссылка 3</a>

Как сделать так, чтобы при клике на ссылку, делался активным нужный пункт меню выпадающего списка в форме. Нужно чтобы он делался именно активным, так как от выбора в этом списке зависит отображение содержимого модального окна, т.е. подмена текста (значения в li) не подходит.
Заранее благодарю за ответы!

@Qwerty_Wasd · 05.02.2019, 12:51

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

так как от выбора в этом списке зависит отображение содержимого модального окна

надо увидеть как это реализовано. Тогда станет понятно как Вам выполнить задачу.

@GarayLeha · 05.02.2019, 19:13 **[ТС]**

Код выпадающего списка:

HTML5

<div class="select" name="Какой металлопрокат: ">
    <div class="form-holder">
        <div id="namediv" name="userName" class="select-control required">АРМАТУРА</div>
        <input type="hidden" name="Вид_металлопроката" value="АРМАТУРА" />
        <i class="zmdi fa fa-angle-down"></i>
    </div>
    <ul id="vybor-met" class="dropdown">
        <li data-id='1' rel="АРМАТУРА" value="АРМАТУРА" name="Металлопрокат: ">АРМАТУРА</li>
        <li data-id='2' rel="ТРУБЫ КРУГЛЫЕ" value="ТРУБЫ КРУГЛЫЕ" name="Металлопрокат: ">ТРУБЫ КРУГЛЫЕ</li>
            <li data-id='3' rel="ТРУБЫ ПРОФИЛЬНЫЕ" value="ТРУБЫ ПРОФИЛЬНЫЕ" name="Металлопрокат: ">ТРУБЫ ПРОФИЛЬНЫЕ</li>
        <li data-id='4' rel="ЛИСТОВОЙ ПРОКАТ" value="ЛИСТОВОЙ ПРОКАТ" name="Металлопрокат: ">ЛИСТОВОЙ ПРОКАТ</li>
        <li data-id='5' rel="БАЛКА ДВУТАВРОВАЯ" value="БАЛКА ДВУТАВРОВАЯ" name="Металлопрокат: ">БАЛКА ДВУТАВРОВАЯ</li>
            <li data-id='6' rel="ШВЕЛЛЕР" value="ШВЕЛЛЕР" name="Металлопрокат:">ШВЕЛЛЕР</li>
        <li data-id='7' rel="ПОЛОСА" value="ПОЛОСА" name="Металлопрокат: ">ПОЛОСА</li>
            <li data-id='8' rel="КРУГ" value="КРУГ" name="Металлопрокат: ">КРУГ</li>
            <li data-id='9' rel="КАТАНКА" value="КАТАНКА" name="Металлопрокат:">КАТАНКА</li>
        <li data-id='10' rel="КВАДРАТ" value="КВАДРАТ" name="Металлопрокат:">КВАДРАТ</li>
        <li data-id='11' rel="ШЕСТИГРАННИК" value="ШЕСТИГРАННИК" name="Металлопрокат:">ШЕСТИГРАННИК</li>
        <li data-id='12' rel="ШТРИПС" value="ШТРИПС" name="Металлопрокат:">ШТРИПС</li>
            <li data-id='13' rel="ПОКОВКА" value="ПОКОВКА" name="Металлопрокат:">ПОКОВКА</li>
    </ul>
</div>

Код ссылок в теле страницы:

HTML5

<div class="blog-content">
    <a href="#">
                <h4 class="title">ТРУБНЫЙ ПРОКАТ</h4>
        </a>
    <ul class="cat-spisok">
        <li><a href="#myModal" onclick="" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы Г/Д</a></li>
        <li><a href="#myModal" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы Х/Д</a></li>
        <li><a href="#myModal" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы ВГП</a></li>
        <li><a href="#myModal" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы Бесшовные</a></li>
        <li><a href="#myModal" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы Электросварные</a></li>
        <li><a href="#myModal" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы Профильные</a></li>
           <li><a href="#myModal" data-toggle="modal" data-target="#largeModal2"><i class="fa fa-angle-double-right"></i> Трубы Квадратные</a></li>
    </ul>
</div>

data-id нужны для изменения контента при выборе пункта в выпадающем списке вот через этот скрипт:

Javascript

$(document).ready(function (){
    $('#vybor-met > li').click(function (){
        $('#marka-tip > div').hide();
        var i=$(this).data('id');
        $('#d'+i).fadeIn();
    });
});

Работу формы можно посмотреть на демо-сайте по кнопке "рассчитать стоимость", там же чуть ниже есть блок с ссылками.
Нужно чтобы при клике например на Трубы Г/Д открывалась форма рассчитать стоимость с уже выбранным в выпадающем списке пунктом Трубы круглые и соответственно контент был подставлен именно для этого пункта меню. Ломаю голову уже который день, все никак не могу найти решение.
Демо-сайт:

Кликните здесь для просмотра всего текста

labmet174.ru/HTML

Добавлено через 2 минуты
Может как-то через onclick можно?

Добавлено через 5 часов 48 минут
Нужно что-то вроде этого:

HTML5

<select id="mySel">
   <option>aaa</option>
   <option>bbb</option>
   <option>ccc</option>
</select>
<hr>
<ul>
   <li><a href="#" onclick="document.getElementById ('mySel').selectedIndex = this.innerHTML; return 0">0</a></li>
   <li><a href="#" onclick="document.getElementById ('mySel').selectedIndex = this.innerHTML; return 0">1</a></li>
   <li><a href="#" onclick="document.getElementById ('mySel').selectedIndex = this.innerHTML; return 0">2</a></li>
</ul>

Но чтобы вместо

HTML5

1	<select><option>

было

HTML5

<ul><li>

@fanatikus · 05.02.2019, 20:17

как я понял, у вас есть список товаов в виде ссылок
вам нужно, чтобы при клике на ссылку открывалась модалка с формой просчета и в зависимости от ссылки в форме разные данные. так?
если да, то в чем проблема?
вешаем сlick на ссылки
при клике шлем аякс на сервер, с идентификаторам продукта
на сервере, в зависимости от товара формируем данные для формы
отдаем на клиент
на клиенте, вставляем данные в форму
выводим модалку
как-то так

@GarayLeha · 06.02.2019, 00:32 **[ТС]**

Спасибо за ответ. Это-то я понимаю, но не знаю как это реализовать правильно... Подскажите наглядно пожалуйста если не сложно. Буду очень признателен, да думаю и другим пригодиться в будущем, т.к. в интернете по этой теме очень мало информации..

Добавлено через 1 час 38 минут
Спасибо, click действительно то что нужно.
Добавил id к пункту меню, а в ссылку вставил

HTML5

1	onclick="document.getElementById('id').click();"

Может кому пригодиться.

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	05.02.2019, 12:51	2
	Сообщение от GarayLeha так как от выбора в этом списке зависит отображение содержимого модального окна надо увидеть как это реализовано. Тогда станет понятно как Вам выполнить задачу. 0

@fanatikus 1931 / 1522 / 703 Регистрация: 17.11.2012 Сообщений: 6,585
	05.02.2019, 20:17	4
	Сообщение было отмечено GarayLeha как решение Решение как я понял, у вас есть список товаов в виде ссылок вам нужно, чтобы при клике на ссылку открывалась модалка с формой просчета и в зависимости от ссылки в форме разные данные. так? если да, то в чем проблема? вешаем сlick на ссылки при клике шлем аякс на сервер, с идентификаторам продукта на сервере, в зависимости от товара формируем данные для формы отдаем на клиент на клиенте, вставляем данные в форму выводим модалку как-то так 1

	06.02.2019, 00:32

Опции темы

Как сделать активным пункт меню в выпадающем списке при клике на ссылку в теле странице?

Решение