Issue when I change the selected option in a dropdown the HTML don't refresh correctly

Question

I am working with a dropdown with countries.

Originaly I have that the selected item is Ukraine.

<select id="country" name="country">
    <option value="US">USA</option>
    <option value="UG">Uganda</option>
    <option value="UA" selected>Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
</select>

With the next jQuery code I want to selected a different country:

$("select#country").val("GB");

In the dropdown now shows United Kingdom, but in the HTML still shows that Ukraine is the selected country, and I need that this change.

I test differents solutions but seems no one works:

I add .change() funtion, but the web start to make a infinity loop of refresing.
```
$("select#country").val(selectedOption).change();
```

I use different jQuery code, but all seems equals.

$("#country option[value="GB"]").attr('selected', 'selected');

I tried to use the .selectmenu('refresh') function but I need to update jQuery and I can't do that.
```
$("#country").selectmenu('refresh');
```

EDIT: The problem didn't was about jquery. It was problem how printed the HTML.

<xsl:for-each select="$country"> 
    <xsl:attribute name="selected">
        <xsl:text>selected</xsl:text>
    </xsl:attribute>
</xsl:for-each>

First, I print the list choosing the selected country. After there was a sorting of the list (I didn't see before). This sorting change the list but not the selected country. It was a timing problem, like I mark in the correct answer.

Thx!

Possible duplicate of [use jquery to select a dropdown option](https://stackoverflow.com/questions/4864620/use-jquery-to-select-a-dropdown-option) — CodeLover, Feb 19 '18 at 09:27
@void It seems that nothing change the HTML. Could be the problem? — AlvaroRM, Feb 19 '18 at 11:42
@AlvaroRM `but in the HTML still shows that Ukraine is the selected country`, then which HTML is this? — void, Feb 19 '18 at 14:03
@void Thx! I found the problem also to your comment. It was problem that the form the HTML print the list. I am going to edit the question including the code. — AlvaroRM, Feb 20 '18 at 08:39
@void Yes, I explain in the edit of my question. Was thank you and the anwer I accepted. — AlvaroRM, Feb 20 '18 at 08:58
@AlvaroRM you accept the answer only when the problem is resolved. Either start a new thread or reopen this question. — void, Feb 20 '18 at 09:00

score 0 · Answer 1 · answered Feb 19 '18 at 09:27

Use trigger('change');

$('#btn1').click(function() {
  $('#country').val('UG').trigger('change');
});
$('#btn2').click(function() {
  $('#country').val('AE').trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country" name="country">
    <option value="US">USA</option>
    <option value="UG">Uganda</option>
    <option value="UA" selected>Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
</select>
<button id='btn1' />1</button>
<button id='btn2' value='2'>2</button>

score 0 · Accepted Answer · answered Feb 19 '18 at 12:10

I guess you have a problem with timing. The select must exist when you run the script. Also jQuery must exist when you run the script.

No change event trigger is required, it never is for normal select value changes.

https://jsfiddle.net/k1m8ayy5/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country" name="country">
    <option value="US">USA</option>
    <option value="UG">Uganda</option>
    <option value="UA" selected>Ukraine</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
</select>
<script>$("#country").val("GB")</script>

A side note: If you have an ID, you never need a tag filter, $('#id') is enough. ID is per defination unique on a page, or at least should be unique on a page.

Issue when I change the selected option in a dropdown the HTML don't refresh correctly

2 Answers2