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

我有一个表格，其中我有一个选择下拉列表，如下所示：

<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。当表单提交时，它没有做任何特殊的事情。你不应该在这里执行提交，除非你想让用户执行特定的操作。

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