在不同的选项上获得不同的表格

Question

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

    <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- 属性（要访问的属性是“选项”，因为“数据-”在内部被修剪）
• 创建一个新函数以隐藏所有表单，然后根据select 的选择选项显示带有id 的表单
  • 为了隐藏我使用 .querySelectorAll 的所有表单，该表单具有 .forEach 方法，可让我轻松迭代元素
• 这里我使用 CSS 来默认隐藏所有表单，然后使用内联样式显示一个，您可以创建一个 CSS 类来更改 display 属性，然后使用 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>

Answer 2

onchange 的选项调用具有隐藏和显示正确形式的函数。

function showForm() {
    var option = document.getElementById('contactOptions').value;
    switch (option) {
        case '1':
            displayForm('option01');
            break;
        case '2':
            displayForm('option02');
            break;
        case '3':
            displayForm('option03');
            break;
        case '4':
            displayForm('option04');
    }
}

function displayForm(id) {
    var formsCollection = document.getElementsByTagName("form");
    for (var i = 0; i < formsCollection.length; i++) {
        if (formsCollection[i].id != id) {
            formsCollection[i].style.display = 'none';
        }else {
            formsCollection[i].style.display = 'block';
        }
    }
}

form {
        display: none;
}

<select id="contactOptions" onchange="showForm()" 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">
    <input value="form 1" type="text">
</form>

<form action="#" method="POST" id="option02">
    <input value="form 2" type="text">
</form>

<form action="#" method="POST" id="option03">
    <input value="form 3" type="text">
</form>

<form action="#" method="POST" id="option04">
    <input value="form 4" type="text">
</form>

Answer 3

• 加载html时，调用函数隐藏页面中的所有表单。例如我用onload=hideAllForm();
• 从下拉列表中选择后获取data-option属性值。
• 按 id 显示表单，由用户选择。

<script>
function hideAllForm(){
var formLength = document.getElementsByTagName('form').length;
for(var i=0;i<formLength;i++){
    document.getElementsByTagName('form')[i].style.display="none";
  }
}


function _check(){
    var formLength = document.getElementsByTagName('form').length;
    var e = document.getElementById("contactOptions");
    var id = e.options[e.selectedIndex].getAttribute('data-option');
	for(var i=0;i<formLength;i++){
	    document.getElementsByTagName('form')[i].style.display="none";
	}
	document.getElementById(id).style.display="block";
 }
</script>

<body onload="hideAllForm();">

<select id="contactOptions" class="pad10 col100 mart25" onchange="_check();" 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">
form01
</form>

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

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

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