When added, the values ​​remain in place

Question

I generate options in select via AJAX. These options will be added when you select the anohter option.

The first function that contains the added data:

    var appendto_c = function(appendto, value, curcode) {
    appendto.append("<option value=\"" + value.currency_value + "\">" + value.type + " " + curcode + value.currency_value + "</option>"); //set the option
    $(".currency_val").find(".select2-chosen").html(value.type + " " + curcode + value.currency_value); //set the placeholder
}

The second function does ajax and is added to the selection depending on the currency identifier that it will receive from the main drop-down list:

var showcurval = function(cur_code) {
    var $options = $('.currency_v'); // the optgroup append to
    var $curcode = '';
    $.ajax({
       type: 'GET',
       url:  '/transactions/get_currency_val?cur_code=' + cur_code,
       success: function(data) {
           var obj = JSON.parse(data);
           $.each(obj, function (k, v) {
               switch (v.currency_code) {
                   case '47':
                       $curcode = '€';
                       appendto_c($options, v, $curcode);
                       break;
                   case '33':
                       $curcode = 'Kč';
                       appendto_c($options, v, $curcode);
                       break;
                   case '131':
                       $curcode = '₽';
                       appendto_c($options, v, $curcode);
                       break;
                   case '144':
                       $curcode = '$';
                       appendto_c($options, v, $curcode);
                       break;
                   case '168':
                       alert('Please set a currency!');
                       break;
               }
           });
       }
    });
}

The final incharge function to send a currency code to showcurval ..

 var selectcurrency = function() {

    var $currency = $(".currency_input").select2(); // main input
    var $curval  = $('.currency_val').select2(); // secondary select with our values
    var $options = $('.currency_v'); // the optgroup append to

    $currency.on('change', function(e) {
       showcurval($(this).select2('data').id);
    });
}
selectcurrency();

JSON:

[{"currency_value":"26.98","currency_code":"47","type":"BUY"},{"currency_value":"25.98","currency_code":"47","type":"SELL"}]

Now, each time the parameter is changed, the selectcurrency();added options, adding, adding a different currency, the old one remains. I tried using html instead of append, but then only 1 option is selected in the selection. Suggestions?

Answer 1

$options .

var showcurval = function(cur_code) {
    var $options = $('.currency_v'); // the optgroup append to
    var $curcode = '';
    $.ajax({
       type: 'GET',
       url:  '/transactions/get_currency_val?cur_code=' + cur_code,
       success: function(data) {
           var obj = JSON.parse(data);
           $options.html("");
           $.each(obj, function (k, v) {
               switch (v.currency_code) {
                   case '47':
                       $curcode = '€';
                       appendto_c($options, v, $curcode);
                       break;
                   case '33':
                       $curcode = 'Kč';
                       appendto_c($options, v, $curcode);
                       break;
                   case '131':
                       $curcode = '₽';
                       appendto_c($options, v, $curcode);
                       break;
                   case '144':
                       $curcode = '$';
                       appendto_c($options, v, $curcode);
                       break;
                   case '168':
                       alert('Please set a currency!');
                       break;
               }
           });
       }
    });
}

Answer 2

ajax $.each ,

$("select").html('');

. :