ドロップダウンメニューから選択したオプションに基づいてHTMLでテキストを表示するにはどうすればよいですか？

Question

私がやっていることは、オプションが入ったドロップダウンメニューがあり、どのオプションが選択されているかによっていくつかのテキスト表示があることです。

私はHTMLとJavaScriptを使用して結論に達しましたが、問題が発生しています。 HTMLの場合

、私はこの持っている - 私はこれ持って

<select id="selectDay"> 
<option>Choose a Day</option> 

とJavascriptのために - `

var select = document.getElementById("selectDay"); 
var response1 = ("Response if a Day between Monday through Friday is Selected"); 
var response2 = ("Response if Saturday or Sunday are selected"); 

var days = ["Sunday", "Monday", "Tuesday", "Wednesday" , "Thursday", "Friday", "Saturday"]; 

for(var i = 0; i < days.length; i++) 
{ 
var opt = days[i]; 
var el = document.createElement("option"); 
el.textContent = opt; 
el.value = opt; 
select.appendChild(el); 

} 

を私はこれまで主にグーグルの使用を介してこれを得たが、今私は困惑している。私はこれをやろうとしているので、プロジェクトを完了したと言うことができます。私はそれを正しくやっているかどうかはわかりません。

Answer 1

onchangeイベントをドロップダウンリストに追加する必要があります。ドロップダウン値を取得すると、それに基づいてresponse1またはresponse2が表示されます。以下のサンプルコードです：

var select = document.getElementById("selectDay"); 
 
var response1 = ("Response if a Day between Monday through Friday is Selected"); 
 
var response2 = ("Response if Saturday or Sunday are selected"); 
 

 
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 
 

 
for (var i = 0; i < days.length; i++) { 
 
    var opt = days[i]; 
 
    var el = document.createElement("option"); 
 
    el.textContent = opt; 
 
    el.value = opt; 
 
    select.appendChild(el); 
 
} 
 

 
function getResponse(eleme) { 
 
    var e = document.getElementById("selectDay"); 
 
    var strUser = e.options[e.selectedIndex].value; 
 
    if (strUser == 'Saturday' || strUser == 'Sunday') { 
 
    console.log(response2) 
 
    } else { 
 
    console.log(response1); 
 
    } 
 
}

<select id="selectDay" onchange=getResponse()> 
 
<option>Choose a Day</option> 
 
</select>

Answer 2

イベントをリッスンする関数（selectのonChangeイベントなど）を作成したいとします。

var dropDown=document.getElementById("selectDay"); 
dropDown.onchange=function(){ 
    alert(dropDown.value); 
} 

その後alert()文がある関数の内部で、あなたはあなたの応答を選ぶことができます。

Answer 3

は、コンボボックスの上に、その変更イベント内で変更イベントリスナーを追加しますが、あなたが選択した値を取得することができるようになります

$("#selectDay").change(function() { 
alert(this.value);//depending upon selected Value choose action}); 

Answer 4

for(a=2;a<7;a++)menu.querySelectorAll('option')[a].onclick=function(){ 
 
alert('Response if a Day between Monday through Friday is Selected')}; 
 
snd.onclick=strd.onclick=function(){ 
 
confirm('Response if Saturday or Sunday are selected')}

<select id="menu"> 
 
<option>Choose a Day</option> 
 
<option id="snd">Sunday</option> 
 
<option>Monday</option> 
 
<option>Tuesday</option> 
 
<option>Wednesday</option> 
 
<option>Thursday</option> 
 
<option>Friday</option> 
 
<option id="strd">Saturday</option> 
 
</select>