CakePHP不會將選定的值從下拉列表更改爲默認值

Question

我不是CakePHP和Javascript的老手，所以我遇到了代碼問題。

我想要做的是使用Formhelper創建一個下拉列表。有一個值顯示另一個列表（例如：值1）。如果我選擇「值1」，則會顯示第二個下拉列表，如果我從第一個列表中選擇另一個值，則不會顯示第二個下拉列表。

到目前爲止好，這是工作。問題是，如果我從第一個列表中選擇另一個選項來隱藏第二個列表，那麼當我再次顯示第二個列表時，它將不會重置第二個列表選項。

每當我在第一個列表中調用onChange時，如何將選中的選項重置爲secondList中的空選項？

這是代碼：

<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>