獲得不同的選擇不同勢形式

我想選擇一個選項時，顯示每個窗體，但我甚至不能提醒每一個選項的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>

我努力的目標父母並提醒身份證，但它只提醒父母身份證？任何人都可以幫助我僅在option01,02,03,04上進行點擊事件嗎？不是默認的，而只是四個選項？

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

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

相關鏈接，但使用內聯JS

link01

來源

2017-05-14 Javaish

這個問題是相當混淆它被問到的方式。你能改述一下嗎，我無法理解你在問什麼 – Konstantine

使用'change'事件而不是'click'。這樣它更可靠。還可以使用'e.target.value'獲取所選選項的值。 – yuriy636

.value工作但.id不？它需要父母的ID？ – Javaish

使用change事件的更可靠的行爲
獲取與e.target.selectedIndex
選擇指數獲取data-財產與.dataset.option（屬性來訪問「選項」，因爲「數據 - 」在內部修剪）
創建一個新函數以隱藏所有窗體，然後用id基於的select
- 所選擇的選項隱藏所有形式我以前.querySelectorAll有.forEach方法，讓我來遍歷元素容易
在這裏，我用CSS以隱藏所有形式默認情況下，然後使用內嵌式的展示之一，你可以創建一個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>

改變 display屬性，然後切換它

來源

2017-05-14 11:21:44 yuriy636

當負載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'); 
 
\t for(var i=0;i<formLength;i++){ 
 
\t  document.getElementsByTagName('form')[i].style.display="none"; 
 
\t } 
 
\t 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>

來源

2017-05-14 10:59:16

這個問題沒有'jQuery'標籤 – julekgwa

對不起，這不是一個jQuery的問題:)無論如何謝謝你的答案 – Javaish

@julekgwa downvote之前，你應該閱讀鏈接https://meta.stackexchange.com/questions/130046 /當我應該投票 –

的選項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>

來源

2017-05-14 11:19:38 julekgwa

獲得不同的選擇不同勢形式

回答

相關問題