How do I display Text in HTML based on an option selected from a Drop-Down Menu?

Question

So what I've been trying to do is have a drop-down menu with options in it and have some text display depending on which option is selected.

I came to the conclusion of using HTML and JavaScript to do it, but I am having trouble.

For the HTML, I have this -

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

And for the JavaScript I have this - `

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);

}

I got this far mainly through use of Google, but I'm stumped now. I'm just trying to do this so I can say I completed a project. I'm not even sure if I'm doing it correctly.

What response1 and response2?

Alexander V. Ulyanov
– Alexander V. Ulyanov

2017-06-10 05:59:09 +00:00
Commented Jun 10, 2017 at 5:59 — Alexander V. Ulyanov
– Alexander V. Ulyanov, Commented Jun 10, 2017 at 5:59

Milan Chheda · Accepted Answer · 2017-06-10 05:45:57Z

2

We need to attach an onchange event to the dropdown which will fetch the dropdown value and based on that, it will either display response1 or response2. Below is a sample code:

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>

answered Jun 10, 2017 at 5:45

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Slateboard Over a year ago

This looks like the exact answer I need. I suppose I replace console.log with something else to display the response in HTML?

Slateboard Over a year ago

I used innerHTML and got it working. Thanks so much.

Wulf Solter · Accepted Answer · 2017-06-10 05:45:31Z

1

You'll want to create a function that listens for an event - such as the onChange event for the select.

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

Then inside the function, where the alert() statement is, you can pick your response.

answered Jun 10, 2017 at 5:45

Wulf Solter

7146 silver badges19 bronze badges

Comments

K 2 · Accepted Answer · 2017-06-10 05:49:37Z

1

Add change event listener on combobox and inside that change event , you will be able to fetch selected value

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

answered Jun 10, 2017 at 5:49

K 2

365 bronze badges

1 Comment

Milan Chheda Over a year ago

I think, he is looking for solutions in plain vanilla and not using JQuery.

Alexander V. Ulyanov · Accepted Answer · 2017-06-10 08:08:20Z

0

 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>

edited Jun 10, 2017 at 8:08

answered Jun 10, 2017 at 7:02

Alexander V. Ulyanov

3862 silver badges15 bronze badges

Collectives™ on Stack Overflow

How do I display Text in HTML based on an option selected from a Drop-Down Menu?

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related