複数のオプションを1つのドロップダウンから別の結果を得る - Javascript/html

フォームの別々のセクションをドロップダウンメニューからの選択に応じて表示するようになりました。複数のオプションを1つのドロップダウンから別の結果を得る - Javascript/html

現在、私は2つの問題を抱えています。最初の領域を非表示にするだけですが、if文を使用して複数のオプションを使用する構文に苦しんでいます。

これを正しく見ているか、これを行う簡単な方法がありますか？

以下のコードでは、正しいifを得るために苦労しているので、私は2つのif文しか持っていないので、私が必要とする8つのオプションのすべてに対してそれをしていません。

私は持っている私のhtmlで

function showfield(name){ 
    if (name=='Supplier meetings') { 
     document.getElementById('div1').style.display="block"; 
    } else { 
     document.getElementById('div1').style.display="none"; 

     if (name=='Product meetings') { 
      document.getElementById('div2').style.display="block"; 
     } else { 
      document.getElementById('div2').style.display="none"; 
     } 
    } 
} 

function hidefield() { 
    document.getElementById('div1').style.display='none'; 
    document.getElementById('div2').style.display='none'; 
    document.getElementById('div3').style.display='none'; 
    document.getElementById('div4').style.display='none'; 
    document.getElementById('div5').style.display='none'; 
    document.getElementById('div6').style.display='none'; 
    document.getElementById('div7').style.display='none'; 
    document.getElementById('div8').style.display='none'; 
}

：

<body onload="hidefield()"> 

<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)"> 
<option value="1">Worked hours</option> 
<option value="2">Overtime</option> 
<option value="3">Sickness</option> 
<option value="4">Unpaid leave</option> 
<option value="5">Compassionate leave</option> 
<option value="6">Holiday inc bank holidays</option> 
<option value="7">Team meetings</option> 
<option value="8">One to ones</option> 
<option value="9">One to one prep</option> 
<option value="10">Huddles</option> 
<option value="Supplier meetings">Supplier meetings</option> 
<option value="Product meetings">Product meetings</option> 
<option value="Training/coaching">Training/coaching</option> 
<option value="Handling other peoples cases">Handling other peoples cases</option> 
<option value="15">Project work</option> 
<option value="16">Surgery time for GK</option> 
<option value="17">Letter checks and feedback</option> 
<option value="18">MI/Reporting/RCA</option> 
</select>

その後、私は、各オプションをオフに表示された必要な部品が含まれているのdiv。

希望は意味があります。あなたが表示され、他のdivが非表示になり、それぞれのdivのIDになり、すべてのオプションにdata-div属性を追加することができます

おかげ

出典

2016-06-15 C Baxter

ここでjQueryを使用できますか、JS専用のソリューションが必要ですか？ –

私はどちらかを使用することができます、私は現在、自分自身にjavascriptを教えており、それを行う最善の方法を研究していますが、より良い方法があれば提案することができます。 –

基本的には、選択した内容に基づいて 'div'を表示し、他の' divs'をすべて非表示にしますか？ –

代わりの各オプション値のための条件を書いて、あなたが示されるべきであることdivの選択に値を直接使用することができます。

function showfield(name){ 
    hidefield(); 
    document.getElementById('div-' + name).style.display="block"; 
}

これが機能するには、IDは対応するoptionの値と一致する必要があります。

<option value="1">1</option> 対応するdiv： <div id="div-1"></div>

出典

2016-06-15 15:54:41

これは完璧に機能しています。私はエラーを投げたときにそれらを必要としなかったオプションのdivを追加しなければなりませんでしたが、ありがとうございます –

それを聞いてうれしいです。ありがとう:) –

。

divにはクラスが必要です。選択に基づいて表示されるdiv以外のクラス名を使用して非表示にすることができます。

HTML

<select name="acti" value="" onchange="showfield(this.options[this.selectedIndex].value)"> 
    <option value="1" data-div="one">Worked hours</option> 
    <option value="2" data-div="two">Overtime</option> 
</select> 

<div id="one">First Div</div> 
<div id="two">Second Div</div>

Javascriptを

function showfield(val) 
{ 
    var divID = $("select[name=acti]").find("option[value='" + val + "']").attr("data-div"); 
    $(".divClass").hide();//You can also use hidefield() here to hide other divs. 
    $("#" + divID).show(); 

}

出典

2016-06-15 15:53:25 Mairaj

複数のオプションを1つのドロップダウンから別の結果を得る - Javascript/html

答えて

関連する問題