Поведение Firebug при выборе элемента из выпадающего списка

Question

У меня есть раскрывающийся список, который, когда пользователь выбирает элемент из него, отображает частичное с соответствующими данными. Но если пользователь изменяет выбор ddl, то ранее отображаемый контент должен быть заменен текущим контентом.

Ниже приведен код

Script

<script> 
     var prev; 
     $(document).on('focus', '.class03', function() { 
      prev = $(this).val(); 
     }).on('change', '.class03', function() { 
      if (prev != "") { 
       $('.cmpCls').last().remove(); 
       alert(prev); 
       $.ajax({ 
        url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's 
        type: "GET", 
        data: { DesignCdId: $(this).val() }, // pass the selected value 
        success: function (data) { 
         $('#cmpDts').append(data); 
        } 
       }); 
      } 
      else { 
       $.ajax({ 
        url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's 
        type: "GET", 
        data: { DesignCdId: $(this).val() }, // pass the selected value 
        success: function (data) { 
         $('#cmpDts').append(data); 
        } 
       }); 
      } 
     }); 
     </script> 

Div добавлять ОКАЗАННЫХ Частичный вид

<div id="cmpDts"> 

</div> 

Вот что смущает меня, когда я использую поджигатель, скрипт работает отлично заменяя ранее отображаемый контент в div 'cmpDts', когда пользователь меняет выбор выпадающего списка.

Но когда я запускаю приложение без firebug, и когда пользователь меняет выбор ddl, вместо замены предыдущего содержимого в div он продолжает добавлять в div без удаления предыдущего содержимого.

Я думаю, что без firebug, каждый раз, когда дело доходит до else, часть независимо от того, prev имеет значение или нет. Я мог бы признать, что because alert не уволен без firebug здесь. Я смущен этим поведением. Вся помощь была оценена. Благодаря!

Edit: Как я получил, что работал (я знаю, что это может быть не правильный подход, но с ограниченным временем я должен был придерживаться этого)

<script> 
     var prev; 
     $(document).on('focus', '.class03', function() { 
      prev = $(this).val(); 
     }).on('change', '.class03', function() { 
      if (prev != "") { 
       //$('.cmpCls').last().remove(); 
       alert("If"); 
       $.ajax({ 
        url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's 
        type: "GET", 
        data: { DesignCdId: $(this).val() }, // pass the selected value 
        success: function (data) { 
         $('.cmpCls').last().replaceWith(data); 
        } 
       }); 
      } 
      else { 
       alert("Else"); 
       $.ajax({ 
        url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's 
        type: "GET", 
        data: { DesignCdId: $(this).val() }, // pass the selected value 
        success: function (data) { 
         $(".class03 option[value='']").remove() ; 
         $('#cmpDts').append(data); 
        } 
       }); 
      } 
     }); 
     </script> 

Answer 1

Вы в первую очередь нужно ждать вашего документа чтобы быть готовым:

$(document).ready(function(){ 

}); 

Теперь вы хотите проверить, что-то в .class03 изменилось.

$(document).ready(function(){ 
    var prev; 
    $(".class03").focus(function(){ prev = $(this).val(); }); 

    $(".class03").change(function(){ 
     if (prev !== "") { $('.cmpCls').last().remove(); } 
      alert(prev); 
      $.ajax({ 
       url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's 
       type: "GET", 
       data: { DesignCdId: $(this).val() }, // pass the selected value 
       success: function (data) { 
        $('#cmpDts').append(data); 
       } 
      }); 
    }); 
}); 

Попробуйте это.

Edit: убрана двойной код