異なるオプションに切り抜いたフォームを取得

私はオプションが選択されたときに各フォームを表示しようとしていますが、私はしても、すべてのオプションの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のクリックイベントのみを手伝ってくれますか？デフォルトではなく、4つのオプションだけですか？

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'イベントを使用してください。そうすれば、より信頼できます。また、 'e.target.value'を使って選択したオプションの値を取得します。 – yuriy636

.valueは機能しますが.idは機能しませんか？それは親のIDがかかりますか？ – Javaish

ので（アクセスのプロパティは「オプション」であるe.target.selectedIndex
で選択したインデックスが.dataset.optionでdata-プロパティをゲット
より信頼性の高い動作のためchangeイベントを使用
新しい機能を作成してすべてのフォームを非表示にし、でそのフォームを表示しますここで私はすべてのフォームを隠すためにCSSを、私は簡単に

要素を反復することができます.forEachメソッドを使用していた私は.querySelectorAllを使用するすべてのフォームを隠すためselect

の選択したオプションに基づいてデフォルト、およびインラインスタイルを使用して1を表示することにより、あなたは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プロパティを変更するCSSクラスを作成し、それトグル可能性

出典

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

異なるオプションに切り抜いたフォームを取得

答えて

関連する問題