提交后保留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();
        }
    });
});