Reload control using loop I created this working sample and the code is below. Any advice on how to make this code; cleaner, more effective, just overall better! The data is coming from an API and I need to parse, select the value in location 0 set the title and then rebuild the drop down control.

can it be done without the JSON.parse(data) or the $.each?

https://dotnetfiddle.net/lfJhGi
      $(&quot;#ddlReleaseYears&quot;).change(function () {
            $('#toptitle').text('change event');
            //coming from API
            var data = &quot;[2021,2020,2019,2018,2017,2016]&quot;;
            var arr = JSON.parse(data);
            $('#toptitle').text(arr[0]);
            var HTML = &quot;&quot;
            $.each(arr, function (index, value) {
                 HTML += &quot;&lt;option value='&quot; +value + &quot;' &quot;;
                 HTML += &quot;&gt;&quot; +value + &quot;&lt;/option&gt;&quot;
            });
            $(&quot;#ddlReleaseYears&quot;).html(&quot;&quot;);
            $(&quot;#ddlReleaseYears&quot;).append(HTML);
        })
The two first things that come to my mind:

Using template strings
Modifying the dropdown HTML once:

$(document).ready(function () {
    $(&quot;#ddlReleaseYears&quot;).change(function () {
        var data = &quot;[2021,2020,2019,2018,2017,2016]&quot;;
        var arr = JSON.parse(data);
        $('#toptitle').text(arr[0]);
        var HTML = &quot;&quot;
        $.each(arr, function (index, value) {
            HTML += `&lt;option value=&quot;${value}&quot;&gt;${value}&lt;/option&gt;`
        });
        // No need to set the html to &quot;&quot; and then append
        $(&quot;#ddlReleaseYears&quot;).html(HTML);
     })
});