I have select and button:

<select id="s">
  <option id="o1">O1</option>
  <option id="o2">O2</option>
</select>

<button id="a">O1 -> O11</button>

I want to see O11 in select after pressing button:

$('#s').click(function(){
  $('#o1').text('O11');
})

But select refreshes only after clicking on select.

/

I have select and button:

<select id="s">
  <option id="o1">O1</option>
  <option id="o2">O2</option>
</select>

<button id="a">O1 -> O11</button>

I want to see O11 in select after pressing button:

$('#s').click(function(){
  $('#o1').text('O11');
})

But select refreshes only after clicking on select.

https://jsfiddle/dfwbLsn1/

• javascript
• jquery
• refresh
• html-select

2 Answers 2

You must bind the click event to the button:

$('#a').click(function(){
    $('#o1').text('O11');
});

That should do it.

Edit: Based on your ment, you also want to change the selected option with the button click. Note that you have no mention of this in your question.

To change the selected option, the options need values. This is how to achieve what you're after:

<select id="s">
    <option id="o1" value="1">O1</option>
    <option id="o2" value="2">O2</option>
</select>

<script>
$('#a').click(function() {
    $('#o1').text('O11');
    $('#s').val(1);
});
</script>

Now clicking the <button> also changes the value of the <select>.

You are binding click event with select click.

$('#s')  //this is you are binding with select 

If you want to do something on button click, then you have to bind click event with button

$('#a').click(function(){
  $('#o1').text('O11');
})