如何在表单搜索中显示相关的div:JS

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提交表单而无需重新加载页面，这在您的情况下是首选选项。另一种方法是将选定的选项保存在本地存储中，并在页面加载时检索它。