Cakephp не меняет выбранное значение из раскрывающегося списка на значение по умолчанию

Question

Я не являюсь ветераном CakePHP и Javascript, поэтому у меня возникают проблемы с кодом.

То, что я пытаюсь сделать, это создать выпадающий список, используя Formhelper. Существует значение, отображающее другой список (ex: значение 1). Если я выберу «Значение 1», появится второй раскрывающийся список, и если я выберу другое значение из первого списка, второй раскрывающийся список не появится.

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

Как сбросить выбранную опцию до пустой опции во втором списке каждый раз, когда я вызываю onChange в firstList?

Это код:

<script type="text/javascript"> 
    function showSecondList(field) { 
     switch (field.val()) { 
      case 'value1': 
       $('#divSecondList').show(); 
       $('#secondList').val(""); 
      break; 
      default: 
       $('#secondList').val(""); 
       $('#divSecondList').hide(); 
     } 
    } 
</script> 

<div> 
    <?php $this->Form->input('firstList', array(
      'label' => 'firstList', 
      'type' => 'select', 
      'empty' => '- select -', 
      'options' => array(
          'value1' => 'value1', 
          'value2' => 'value2' 
      ), 
      'onChange' => 'showSecondList($(\'#firstList\'));' 
     )); 
    ?> 
    </div> 

<div id="divSecondList" style="display:none"> 
    <?php echo $this->Form->input('secondList', array(
      'label' => 'secondList', 
      'type' => 'select', 
      'empty' => '- select -', 
      'options' => array(
          'value1' => 'value1', 
          'value2' => 'value2' 
      ), 
     )); 
    ?> 
</div> 

Answer 1

Это, как представляется, проблема JavaScript, а не торт, так что позвольте мне переписать его как простой HTML и JavaScript, так что вы можете проверить, что он работает, как вы хотите. Если это не в вашем коде, возможно ли, что у вас есть другой JavaScript, прикрепленный к этим выборам? Или вы видите какие-либо ошибки в консоли?

function showSecondList(field) { 
 
     switch (field.val()) { 
 
     case 'value1': 
 
      $('#divSecondList').show(); 
 
      $('#secondList').val(""); 
 
      break; 
 
     default: 
 
      $('#secondList').val(""); 
 
      $('#divSecondList').hide(); 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <div class="control-group"> 
 
    <label class="control-label" for="firstList">firstList</label> 
 
    <div class="controls"> 
 
     <select name="data[firstList]" id="firstList" onchange="showSecondList($('#firstList'));"> 
 
     <option value="">- select -</option> 
 
     <option value="value1">value1</option> 
 
     <option value="value2">value2</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="divSecondList" style="display:none"> 
 
    <div class="control-group"> 
 
    <label class="control-label" for="secondList">secondList</label> 
 
    <div class="controls"> 
 
     <select name="data[secondList]" id="secondList"> 
 
     <option value="">- select -</option> 
 
     <option value="value1">value1</option> 
 
     <option value="value2">value2</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>