My teacher wants me to create this program with JavaScript and HTML where array values are displayed in a drop-down, then when I click on a drop-down value, it displays the drop-down value I clicked on in a paragraph below the dropdown. I've already created the drop-down with the array values in it. (to display the drop-down values, first you have to click the button that says "click here")
How can I get a drop-down value I click on to display below the drop-down?
This is what I have:
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];
// Main function
function GFG_Fun() {
for (var i = 0; i < gr10.length; i++) {
var optn = gr10[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id="geeks"></p>
<select id="arr">
<option value="1">Select Course</option>
</select>
<br>
<br>
<button onclick="GFG_Fun();">
Click Here
</button>
<br>
<p id="gfg" ></p>
<script src="script.js"></script>
</body>
</html>Well, simple plnkr: https://plnkr.co/edit/B0X1xV2JXnUWLaGu?preview
<script >
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
select.addEventListener('input', e => down.innerText = e.target.value )
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];
// Main function
function GFG_Fun() {
for (var i = 0; i < gr10.length; i++) {
var optn = gr10[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}
</script>
I solved it but in my opinion you should've tried searching for answers first or at least give us some idea of what you have tried so far. I'm not sure but it feels like you requested SO to do your homework.
I only added the following part to quickly explain how it can be done. You may want to modify it to get the desired result.
// --------------------
GFG_Fun();
$('#arr').change(function() {
var newText = $('#arr option:selected').val();
$('#gfg').append('<p>' + newText + '</p>')
});
// --------------------
Here's the working solution:
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];
// Main function
function GFG_Fun() {
for (var i = 0; i < gr10.length; i++) {
var optn = gr10[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}
// --------------------
GFG_Fun();
$('#arr').change(function() {
var newText = $('#arr option:selected').val();
$('#gfg').append('<p>' + newText + '</p>')
});
// --------------------<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<p id="geeks">
</p>
<select id="arr">
<option value="1">Select Course</option>
</select>
<br><br>
<button onclick="GFG_Fun();">
Click Here
</button>
<br>
<p id="gfg">
</p>
<script src="script.js">
</script>
</body>
</html>