2014-11-20 5 views
1

Я теряю информацию о том, как вручную обновлять выбранное значение combobox, прежде чем запускать событие JQuery «change» для его получения сохраненного выбранного значения. Независимо от того, что я делаю, сохраненное выбранное значение в событии изменения пуст.Вручную значение combobox не работает перед запуском события изменения

Я использую сохраненные значения из базы данных, которая передается в javascript во время загрузки веб-страницы, и когда это делается, нужно, чтобы javascript повторно выполнил выбор combobox (&, выпустив еще несколько comboboxes [в этом случае, Марка, модель & Trim]).

Есть ли способ сделать эту работу? Поскольку я вручную выбрал его только один раз, он должен работать так же, как пользователь, выбирая combobox вручную с помощью мыши. Благодарю.

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      function AnimationBegin3() { 
       var $deferred = $.Deferred(); 

       /* Start animation */ 

       $deferred.resolve(); 
       return $deferred; 
      } 
      function AnimationEnd3() { 
       var $deferred = $.Deferred(); 

       /* End animation */ 

       $deferred.resolve(); 
       return $deferred; 
      } 
      function FormLoad_Years_Combobox(parmFormYearId) { 
       var formYearSelectedValue = ""; 

       $('#' + parmFormYearId).on('change', function() { 
        formYearSelectedValue = ($('#' + parmFormYearId).val() == null ? "" : $('#' + parmFormYearId).val()); 

        alert("This selected Year is " + formYearSelectedValue); 

        $('#' + parmFormYearId).empty(); 

        AnimationBegin3().done(function() { 
         $('#' + parmFormYearId).append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>"); 
         $('#' + parmFormYearId).append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>"); 
         $('#' + parmFormYearId).append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>"); 
         $('#' + parmFormYearId).append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>"); 
         $('#' + parmFormYearId).append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>"); 

         AnimationEnd3(); 
        }).fail(function() { AnimationEnd3(); }); 
       }); 
      } 

      //Load webpage... 
      FormLoad_Years_Combobox('formYear'); 

      //Trial #1... 
      //$('#formYear').val('2010').change(); 

      //Trial #2... 
      //$('#formYear').val('2010').trigger('change'); 

      //Trial #3... 
      //$('#formYear').trigger('change', function() { $('#formYear').val('2010'); }); 

      //Trial #4... 
      //$('#formYear').val('2010'); 
      //$('#formYear').trigger('change'); 

      //Trial #5... 
      $('#formYear').val('2010'); 
      $('#formYear').change(); 
     }); 
    </script> 
    </head> 
    <body> 
     <select id="formYear" name="formYear"></select> 
    </body> 
</html> 

ответ

1

Вам нужно установить значение <select> после анимации закончились, и после того, как вы заполнить выпадающий список с <option> с.

function FormLoad_Years_Combobox(parmFormYearId) { 
    var formYearSelectedValue = ""; 

    $('#' + parmFormYearId).on('change', function() { 
     formYearSelectedValue = ($('#' + parmFormYearId).val() == null ? "" : $('#' + parmFormYearId).val()); 

     alert("This selected Year is " + formYearSelectedValue); 

     $('#' + parmFormYearId).empty(); 

     AnimationBegin3().done(function() { 
      $('#' + parmFormYearId).append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>"); 
      $('#' + parmFormYearId).append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>"); 
      $('#' + parmFormYearId).append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>"); 
      $('#' + parmFormYearId).append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>"); 
      $('#' + parmFormYearId).append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>"); 

      $('#' + parmFormYearId).val(formYearSelectedValue); 

      AnimationEnd3(); 
     }).fail(function() { AnimationEnd3(); }); 
    }); 
} 

Причина для установки значения внутри обратного вызова для анимации заключается в том, что вы избегаете состояния гонки.

Ваш исходный код устанавливает значение на <select>до выполняется обратный вызов анимации, поэтому вы устанавливаете значение в пустое раскрывающееся меню. Поскольку в раскрывающемся списке с этим значением нет <option>, свойство value остается пустой строкой.

После этого анимация заканчивается, выполняет обратный вызов и заполняет выпадающий список <option>. Поскольку текущий value является пустой строкой, ничто не будет выбрано в раскрывающемся списке.

Чтобы избежать этого состояния гонки, вам нужно установить значение выпадающего списка после вы заполните его <option> с, не после того, как вы называете FormLoad_Years_Combobox.

Вы, вероятно, хотите, чтобы изменить функцию FormLoad_Years_Combobox принять значение по умолчанию:

function FormLoad_Years_Combobox(parmFormYearId, defaultValue) { 
    var formYearSelectedValue = ""; 
    var $year = $('#' + parmFormYearId); 

    $year.on('change', function() { 
     formYearSelectedValue = defaultValue || $('#' + parmFormYearId).val(); 

     $year.empty(); 

     AnimationBegin3().done(function() { 
      $year.append("<option value='2013'" + ("2013" == formYearSelectedValue ? " selected" : "") + ">2013</option>") 
       .append("<option value='2012'" + ("2012" == formYearSelectedValue ? " selected" : "") + ">2012</option>") 
       .append("<option value='2011'" + ("2011" == formYearSelectedValue ? " selected" : "") + ">2011</option>") 
       .append("<option value='2010'" + ("2010" == formYearSelectedValue ? " selected" : "") + ">2010</option>") 
       .append("<option value='2009'" + ("2009" == formYearSelectedValue ? " selected" : "") + ">2009</option>"); 
       .val(formYearSelectedValue); 

      alert("This selected Year is " + formYearSelectedValue); 

      AnimationEnd3(); 
     }).fail(function() { AnimationEnd3(); }); 
    }); 
} 

//Load webpage... 
FormLoad_Years_Combobox('formYear', '2010'); 

Вы также должны сохранить результат $('#' + parmFormYearId) в переменной и ссылаться на это. Кроме того, большинство методов jQuery возвращают сам объект jQuery, поэтому вы можете связать вызовы методов вместе.

+0

Но «formYearSelectedValue» в следующей строке после «$ („#“+ parmFormYearId) .он („изменение“, функция() {» строка кода содержит пустое значение. Вы можете захватить источник код из сообщения и настройки с ним – fletchsod

+1

Анимация асинхронна. Позвольте мне изменить мой ответ –

+0

@fletchsod: Я добавил к своему ответу, чтобы помочь объяснить, что происходит, чтобы вызвать вашу проблему. –