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();
        }
    });
});

提交后保持jQuery生成表单字段

1 个答案: