javascript - Cakephp 未将下拉列表中的选定值更改为默认值

Question

我不是 CakePHP 和 Javascript 的老手，所以我在代码方面遇到了麻烦。

我想做的是使用 Formhelper 创建一个下拉列表。有一个值显示另一个列表(例如:值 1)。如果我选择“值 1”，则会出现第二个下拉列表，如果我从第一个列表中选择其他值，则不会出现第二个下拉列表。

到目前为止一切顺利，一切正常。问题是，如果我从第一个列表中选择另一个选项来隐藏第二个列表，当我再次显示第二个列表时，它不会重置第二个列表选项。

每次调用第一个列表中的 onChange 时，如何将第二个列表中的所选选项重置为空选项？

这是代码:

<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 问题而不是 Cake，所以让我将其重写为简单的 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>