Question

我有一个表单，其中我有一个选择下拉列表如下：

<form action="/boat-types/">
  <select id="selectField" class="form-control">
    <option>Boat Type</option>
    <option value="option1">Sail b || Monohull (2-3 cabins)</option>
    <option value="option2">Sail b || Monohull (4 or more cabins)</option>
    <option value="option3">Sail b || Catamaran (2-3 cabins)</option>
    <option value="option4">Sail b || Catamaran (4 or more cabins)</option>
    <option value="option5">Power b || Monohull (2-3 cabins)</option>
    <option value="option6">Power b || Monohull (4 or more cabins)</option>
    <option value="option7">Power b || Catamaran (2-3 cabins)</option>
    <option value="option8">Power b || Catamaran (4 or more cabins)</option>
  </select>
  <div class="find-yacht-btn">
    <a class="btn btn-primary" href="javascript:void(0)">Find my yacht</a>
  </div>
</form>

我在每个选择选项上都有一个div显示如下。这意味着如果我从下拉列表中选择选项1，则在提交表单后将显示选项1：

  <div id="option1" class="box">Content 1</div>
  <div id="option2" class="box">Content 2</div>
  <div id="option3" class="box">Content 3</div>
  <div id="option4" class="box">Content 4</div>

我尝试了以下解决方案，但在提交表单后没有显示：

$(document).ready(function () {
  $('.box').hide();
  $('#option1').show();
  $('#selectField').change(function () {
    $('.box').hide();
    $('#'+$(this).val()).show();
  });
});

Answer 1

您可以使用jquery.ajax提交表单而无需重新加载页面，这是您案例中的优先选项。其他方法是在localStorage中保存所选选项，并在页面加载时检索它。

如何在表单搜索上显示相关的div：JS

1 个答案: