Как сделать, чтобы при нажатии на ссылку выбирались нужные option value в selectах?

Question

[Alexander Lashchevsky]

Здравствуйте!
Отвечая на один вопрос Юрий Лобанов поделился со мной одним решением, однако для полного решения моей проблемы мне его, к сожалению, не хватило.
В данном случае при нажатии на ссылку в selectе выбирается определённый option value. Также очень важно, что эти selectы не должны находиться внутри form. Код:

$('a').on('click',function(){
  var sel = $($(this).attr('data-sel')),
      val = $(this).attr('data-val');
  sel.val(val);
});

ХТМЛ:

<a href="#" data-sel=".select_name" data-val="val1">Первый</a>
<a href="#" data-sel=".select_name" data-val="val2">Второй</a>
<a href="#" data-sel=".select_name" data-val="val3">Третий</a>
<a href="#" data-sel=".select_name" data-val="val4">Четвертый</a>
<select class="select_name">
    <option value="val1">Первый</option>
    <option value="val2">Второй</option>
    <option value="val3">Третий</option>
    <option value="val4">Четвёртый</option>
</select>

Но мне также необхоимо, чтобы при нажатии на ссылку выбирались заданные value сразу в двух selectах, т.е. у нас есть ссылки:

<a href="#">Выбрать первые</a>
<a href="#">Выбрать вторые</a>
<a href="#">Выбрать третьи</a>
<a href="#">Выбрать четвёртые</a>

И два selecta:

<select class="select_first">
    <option value="val-1-1">Первый в первом</option>
    <option value="val-1-2">Второй в первом</option>
    <option value="val-1-3">Третий в первом</option>
    <option value="val-1-4">Четвёртый в первом</option>
</select>

<select class="select_second">
    <option value="val-2-1">Первый во втором</option>
    <option value="val-2-2">Второй во втором</option>
    <option value="val-2-3">Третий во втором</option>
    <option value="val-2-4">Четвёртый во втором</option>
</select>

И при нажатии на ссылку должны происходить нужные выборы в них обоих. Значения value всюду разное.
Будте добры, расскажите, как это сделать.

С уважением,
Александр.

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/IwzAd
Заметьте, я объединил все ссылки в один блок, как советовал в предыдущем вопросе @Petroveg, можно обойтись и без этого, но уж больно много писанины получается.

P.S. Селектов Вы можете заполнить столько, сколько хотите, три, четыре и т. д., главное правильно заполнить дата-атрибуты.

Comments

[Alexander Lashchevsky]

Спасибо Вам ещё раз!