Невозможно изменить выпадающий список в html, который использует выбранный плагин

Question

Вот фрагмент моего httml webapp. Я пытаюсь изменить выбранное значение .commmethod на основе выбора .commtype, но все обычные методы не работают для меня.

Ниже фрагмента html является мой jquery.

<div class="form-group"> 
    <div class="col-sm-4"> 
    <select style="display: none;" class="combobox form-control chzn-done" id="commtype" name="CommunicationTypeId"> 
     <option value="-1">Select one...</option> 
     <option value="401">Phone</option> 
     <option value="403">Fax</option> 
     <option value="404">Email</option> 
     <option value="402">Postal</option> 
    </select> 
    <div style="width: 513px;" class="chzn-container chzn-container-single" id="commtype_chzn"> 
     <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> 
      <span>Select one...</span> 
     </a> 
     <div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;"> 
     <ul class="chzn-results"> 
       <li id="commtype_chzn_o_0" class="active-result result-selected" style="">Select one...</li> 
       <li id="commtype_chzn_o_1" class="active-result" style="">Phone</li> 
       <li id="commtype_chzn_o_2" class="active-result" style="">Fax</li> 
       <li id="commtype_chzn_o_3" class="active-result" style="">Email</li> 
       <li id="commtype_chzn_o_4" class="active-result" style="">Postal</li> 
     </ul> 
     </div> 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-sm-4"> 
    <select style="display: none;" class="combobox form-control chzn-done" id="commmethod" name="CommunicationMethodId"> 
     <option value="-1">Select one...</option> 
     <option value="2">Slow</option> 
     <option value="5">Fast</option> 
     <option value="4">Fasted</option> 
     <option value="1">Slowest</option> 
     <option value="3">Slower</option> 
    </select> 
    <div style="width: 513px;" class="chzn-container chzn-container-single" id="commmethod_chzn"> 
     <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> 
     <span>Select one...</span> 
     </a> 
     <div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;"> 
     <ul class="chzn-results"> 
      <li id="commmethod_chzn_o_0" class="active-result result-selected" style="">Select one...</li> 
      <li id="commmethod_chzn_o_1" class="active-result" style="">Slow</li> 
      <li id="commmethod_chzn_o_2" class="active-result" style="">Fast</li> 
      <li id="commmethod_chzn_o_3" class="active-result" style="">Fasted</li> 
      <li id="commmethod_chzn_o_4" class="active-result" style="">Slowest</li> 
      <li id="commmethod_chzn_o_5" class="active-result" style="">Slower</li> 
     </ul> 
    </div> 
</div> 

Jquery код, который делает установить выбранное значение commmethod, однако, не изменяет другие значения, необходимые для записи, чтобы быть процессы при проверке на форме представить. (См фрагмент после JQuery)

<script type="text/javascript"> 
    $("#commtype").change(function() { 
     //I do get the correct selected value here 
     var theselected = $('#commtype >option:selected').text(); 

     switch (theselected) { 
      case "Phone": 
       $("#commmethod").val(2); 
       break; 
      case "Fax": 
       $("#commmethod").val(5); 
       break; 
      case "Email": 
       $('#commmethod').val(4); 
       break; 
      case "Postal": 
       $('#commmethod').val(1); 
       break; 
      default: 
       $('#commmethod').val(1); 
       break; 
     } 

     $("#commmethod").trigger("liszt:updated"); 
    }); 
</script> 

Так что, если я вывожу # commmethod.val после переключения я получаю значение я хочу, но следующие элементы (помеченную --->) в HTML выше не обновляется по мере необходимости ...

<div style="width: 513px;" class="chzn-container chzn-container-single" id="commmethod_chzn"> 
    <a href="javascript:void(0)" class="chzn-single" tabindex="-1"> 
---> <span>Select one...</span> 
    </a> 
    <div class="chzn-drop" style="left: -9000px; width: 511px; top: 43px;"> 
     <ul class="chzn-results"> 
      <li id="commmethod_chzn_o_0" class="active-result result-selected" style="">Select one...</li> 
--->  <li id="commmethod_chzn_o_1" class="active-result" style="">Slow</li> 
      <li id="commmethod_chzn_o_2" class="active-result" style="">Fast</li> 
      <li id="commmethod_chzn_o_3" class="active-result" style="">Fasted</li> 
      <li id="commmethod_chzn_o_4" class="active-result" style="">Slowest</li> 
      <li id="commmethod_chzn_o_5" class="active-result" style="">Slower</li> 
     </ul> 
    </div> 
</div> 

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

***** Обновление ***** Оказывается, выбранный jquery плагин делает обновления для события. Исследование stackoverflow для корректного обновления раскрывающегося списка еще не нашло решения.

Я ценю любую помощь. Спасибо.

Answer 1

После того как все предложения (спасибо всем) и дальнейшие исследования StackOverflow, я нашел решение моей конкретной проблемы.

Хотя нижеприведенный фрагмент не обновляет опцию выбора выпадающего списка, ему это не нужно. Он обновляет выбранные значения, которые затем проверяются и сохраняются при отправке формы.

новый JQuery ...

$("#commtype").change(function() { 

    var theselected = $('#commtype >option:selected').text(); 

    switch (theselected) { 
     case "Phone": 
      $('#commmethod').val(2); 
      break; 
     case "Fax": 
      $('#commmethod').val(5); 
      break; 
     case "Email": 
      $('#commmethod').val(4); 
      break; 
     case "Postal": 
      $('#commmethod').val(1); 
      break; 
     default: 
      $('#commmethod').val(-1); 
      break; 
    } 

    $('#commmethod').chosen().change(); 
    $("#commmethod").trigger("liszt:updated"); 
}); 

Answer 2

ли это

<script type="text/javascript"> 
    $("#commtype").change(function() { 
     //I do get the correct selected value here 
     var theselected = $('#commtype >option:selected').text(); 

     switch (theselected) { 
      case "Phone": 
       $("#commdetail").val(2); 
      case "Fax": 
       $("#commdetail")val(1); 
      case "Email": 
       $('#commdetail').val(5); 
      case "Postal": 
       $('#commdetail').val(4); 
      default: 

     } 
    }); 
</script> 

Answer 3

Я думаю, что вы ищете что-то вроде следующего.

$("#commtype").change(function() { 
    var theselected = $('option:selected', this).text(); 

    switch (theselected) { 
     case "Phone": 
      $("#commmethod").val(2); 
     case "Fax": 
      $("#commmethod").val(5); 
     case "Email": 
      $("#commmethod").val(4); 
     case "Postal": 
      $("#commmethod").val(1); 
     default: 
      $("#commmethod").val(-1); 
    } 

    $("#commmethod").trigger("liszt:updated"); //to update chosen select 
}); 

Answer 4

Попробуйте использовать инструменты разработчика, чтобы получить значение.

$('#commmethod').val(); 

Должно возвращать ожидаемое значение, но значение отображается неправильно на странице. Обычно это происходит, если элемент управления не обновляется правильно.

После установки значения, попробуйте добавить это также

$("#commmethod").val('whatever').trigger("liszt:updated"); 
    $("#commmethodSimple").val('whatever').trigger('change'); 
    $.uniform.update();