提交后保留jQuery生成的表单字段

Question

这是我正在使用的 jQuery。

我在标题中的 Javascript：

  $(document).ready(function () {
    $("#form-order").hide();
    $('#list').change(function() {
      if ($(this).val() == 'C' || $(this).val() == 'D') {
        $('#form-order').show();
      } else {
        $('#form-order').hide();
      }
    });
  });

还有我身体的一部分：

List:
<select name="list" id="list">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

<div id="form-order">
Order: 
<select name="order" id="order">
<option value="class">class</option>
<option value="event">event</option>
</select>
</div>

http://jsfiddle.net/qJ539/1/

提交前效果很好。如果选择 A 或 B，<div>（第二个下拉字段）将不可见。如果选择 C ​​或 D，则会显示 <div>。

我的问题是在提交带有选择 C ​​或 D 的表单时，它还隐藏了 .那么在这些情况下如何保持<div> 可见呢？

我认为应该有一个解决方案来检查我的第一个下拉字段值的状态并显示/隐藏<div>。提交后，我的代码会将所有选定的值保留在下拉字段中。

小更新： 表单的提交由input_type=submit元素完成。

Answer 1

这行得通吗？

$(document).ready(function () {
    $("#form-order").hide();

    if ($('#list').val() == 'C' || $('#list').val() == 'D') {
        $('#form-order').show();
    } else {
        $('#form-order').hide();
    }

    $('#list').change(function() {
        if ($(this).val() == 'C' || $(this).val() == 'D') {
            $('#form-order').show();
        } else {
            $('#form-order').hide();
        }
    });
});