Как имитировать нажатие на опцию выпадающего списка?

Question

[megamutex]

Здравствуйте. Как можно имитировать нажатие на определенную опцию выпадающего списка? Например, есть кнопки

<a class="but-1">butt</a>
<a class="but-2">butt</a>

И список

<select>
<option value="val1">value1</option>
<option value="val2">value2</option>
</select>

Как сделать так, чтобы при нажатии на кнопку .but-1 имитировалось нажатие, как мышкой на опцию val1?

Answer 1

[Александр]

Зачем именно клик? ведь при смене select сгенерирует change, на который можно как раз таки подписаться. Сменить можно как угодно, к примеру.

$('.but-1').on('click',(e)=>{
	$('select option:eq(0)').prop('selected',true);    
});

Answer 2

[Mycolaos]

Обработайте событие нажатия на кнопку. Например:

<a id='btn1' onclick='selectCity(event)'>Moscow</a>
<a id='btn2' onclick='selectCity(event)'>Tokyo</a>

<select id='mySelect'>
  <option value='0'>Moscow</option>
  <option value='1'>Tokyo</option>
</select>

<script>
function selectCity(e) {
if(e.target.id === 'btn1')
  document.getElementById('mySelect').selectedIndex = '0';
else
if(e.target.id === 'btn2')
  document.getElementById('mySelect').selectedIndex = '1';
}
</script>

Comments

[Максим Е]

а зачем onclick вешать в онлайне?
проще и лучше сделать $("селектор").click();

[Mycolaos]

Максим Креативный: Вы совершенно правы. Этот код просто для примера — копипаст на любую страницу или онлайн редактор 100% будет работать.

[Сергей delphinpro]

Максим Креативный: addEventListener, вы хотели сказать? :)

Answer 3

[Ivanq]

$(".but-1").click(function() {
    $(".val-1").click();
});

<a class="but-1">butt</a>
<a class="but-2">butt</a>

<select>
<option class="val-1" value="val1">value1</option>
<option class="val-2" value="val2">value2</option>
</select>

Comments

[megamutex]

не срабатывает нажатие. я брал по value, не по классу

[Максим Е]

megamutex: нужно запускать действия, привязанные к option или выделять элемент в списке?

[Ivanq]

Максим Креативный: выделять. читайте вопрос

[Максим Е]

Ivanq: "Как имитировать нажатие на опцию выпадающего списка?" где тут "выделять"? в описании вопроса тоже ничего нет про выделение, есть только "нажатие". Учитесь читать.

[Ivanq]

Максим Креативный: имитировать нажатие на option - это и есть выделять, не?

[Ivanq]

Максим Креативный: имитировать нажатие на option - это и есть выделять, не?

[Максим Е]

Ivanq: нет. выделить можно через через attr(), а запустить действия, которые "навешаны" на элемент через trigger()

[Ivanq]

Максим Креативный: для меня это без разницы. я плохо знаю jQuery, но не лучше ли использовать обычное $("xxx").click(); ?