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>