javascript - Refresh select using jquery? - Stack Overflow

admin管理员组

文章数量:1414613

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

Share Improve this question Follow edited Sep 14, 2022 at 12:00 aynber 23k99 gold badges5454 silver badges6868 bronze badges asked Feb 25, 2016 at 12:12 Ivan BorshchovIvan Borshchov 3,66055 gold badges4444 silver badges6565 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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');
})

本文标签： javascriptRefresh select using jqueryStack Overflow