Выбор Ajax мгновенное изменение значения по умолчанию

Question

Я использую Ajax для заполнения выбранного элемента html значениями из возвращаемого массива PHP.

Ajax код:

<script type = "text/javascript"> 
    $(document).ready(function(){ 
     $('#fds_categories').change(function() { 
      var template_id = $(this).val(); 

      $.ajax({ 
       type: "POST", 
       data: { 
        'username' : '<?php echo $user->username; ?>', 
        'categorie_id' : template_id 
       }, 
       url: "ajax/fds_template_ajax.php", 
       success: function(data){ 
        $('#fds_price').empty(); 
        $.each($.parseJSON(data), function(index, element) { 
         if(element.p == 0){ 
          $('#fds_price').append(
           $('<option data-icon="man"></option>').val(element.id).html(element.name + ' Price: ' + element.pb + ' Zcard') 
          ); 
         }else{ 
          $('#fds_price').append(
           $('<option data-icon="man"></option>').val(element.id).html(element.name + ' Price: ' + element.p + ' Bucks') 
          ); 
         } 
        }); 
       } 
      }); 
     }); 
    }); 
</script> 

К сожалению значения там не будет изменять значение предварительного просмотра по умолчанию для выбора элемента.

Пример:

GIF изображение: https://gyazo.com/6aab1545ff143536c17e97eb5ef6315a

Как вы можете видеть, первый я выбираю «Рубашку» в первом меню выбора, то элементы будут изменять атрибуты во втором меню выбора, печально Предварительный просмотр элементов по умолчанию останется и не изменится. В этом случае: «Цена сэра сэра». Он изменяется после того, как я выбрал другой элемент.

Но есть ли способ изменить элемент предварительного просмотра по умолчанию, как только я выбрал значение в первом выборе?

---

Что я хочу:

1) Выберите Рубашки из первого меню выбора,

2) Второе меню выбора следует немедленно изменить и показать: «цена Tank» вместо «сэром сцены цена".

У кого-нибудь есть идея, как заставить это работать?

Answer 1

Добавить по умолчанию <option>, что не имеет никакого значения

success: function(data){ 

     var defOption ='<option value=""> Default text</option>'; 
     // html() method replaces existing 
     $('#fds_price').html(defOption); 

     $.each($.parseJSON(data), function(index, element) { 
      ..... 
     }); 
} 

Также обратите внимание, если вы установите dataType:'json' вам не нужно, чтобы разобрать ответ самостоятельно