javascript - 在不同的选项上获取不同的表格

Question

我试图在选择一个选项时显示每个表单，但我什至无法提醒每个选项的 ID xD ......

    <select id="contactOptions" class="pad10 col100 mart25" name="level">
        <option class="" selected disabled>About</option>
        <option data-option="option01" class="" value="1">Form01</option>
        <option data-option="option02" class="" value="2">Form02</option>
        <option data-option="option03" class="" value="3">Form03</option>
        <option data-option="option04" class="" value="4">Form04</option>
    </select>

<form action="#" method="POST" id="option01">
</form>

<form action="#" method="POST" id="option02">
</form>

<form action="#" method="POST" id="option03">
</form>

<form action="#" method="POST" id="option04">
</form>

我正在尝试定位父级并提醒 ID，但它只提醒父级 ID？任何人都可以帮助我只对 option01,02,03,04 进行点击事件吗？不是默认值，而是只有四个选项？

var contactOptions = document.querySelector("#contactOptions");
contactOptions.addEventListener("click", doSomethings, false);

function doSomethings(e){
    alert(e.target.id);
}

相关链接，但带有内联 js

link01

Answer 1

• 使用 change 事件以获得更可靠的行为
• 使用e.target.selectedIndex获取选中的索引
• 使用 .dataset.option 获取 data- 属性(要访问的属性是“option”，因为“data-”在内部被 trim )
• 创建一个新函数以隐藏所有表单，然后根据 select 的选择选项显示具有 id 的表单
  • 为了隐藏所有表单，我使用了 .querySelectorAll，它具有 .forEach 方法，可以让我轻松地遍历元素
• 这里我使用 CSS 来默认隐藏所有表单，然后使用内联样式显示一个表单，您可以创建一个更改 display 属性的 CSS 类，然后使用 JavaScript 切换它

var contactOptions = document.querySelector("#contactOptions");
contactOptions.addEventListener("change", doSomethings, false);

function doSomethings(e) {
  var selectedIndex = e.target.selectedIndex;
  var selectedFormId = e.target.options[selectedIndex].dataset.option;
  showSelectedForm(selectedFormId)
}

function showSelectedForm(id) {  
  // hide other forms
  document.querySelectorAll('form').forEach(function(element) {
    element.style.display = 'none';
  });
  
  var formToShow = document.querySelector('form#' + id);
  
  // show the selected form
  formToShow.style.display = 'block';
}

form {
  display: none;
}

<select id="contactOptions" class="pad10 col100 mart25" name="level">
    <option class="" selected disabled>About</option>
    <option data-option="option01" class="" value="1">Form01</option>
    <option data-option="option02" class="" value="2">Form02</option>
    <option data-option="option03" class="" value="3">Form03</option>
    <option data-option="option04" class="" value="4">Form04</option>
</select>

<form action="#" method="POST" id="option01">
  form option01
</form>

<form action="#" method="POST" id="option02">
  form option02
</form>

<form action="#" method="POST" id="option03">
  form option03
</form>

<form action="#" method="POST" id="option04">
  form option04
</form>