How to simulate clicking on a dropdown option?

Question

JavaScript

Hello. How can I simulate clicking on a specific dropdown option? For example, there are buttons

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

And the list

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

How to make it so that when you click on the button , it simulates clicking like a mouse on an option ? .but-1val1

Answer 1

Why click? after all, when changing, select will generate a change, to which you can just subscribe. You can change it any way you like.

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

Answer 2

Handle the button click event. For example:

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

Answer 3

$(".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>