如何获得我单击以显示在下拉列表下方的下拉值
[英]How can I get a dropdown value I click on to display below the dropdown
问题描述
My teacher wants me to create this program with JavaScript and HTML where array values are displayed in a dropdown, then when I click on a dropdown value, it displays the dropdown value I clicked on in a paragraph below the dropdown.
我的老师希望我使用 JavaScript 和 HTML 创建这个程序，其中数组值显示在下拉列表中，然后当我单击下拉值时，它会在下拉列表下方的段落中显示我单击的下拉值。 I've already created the dropdown with the array values in it.我已经创建了包含数组值的下拉列表。 (to display the dropdown values, first you have to click the button that says "click here") （要显示下拉值，首先您必须单击显示“单击此处”的按钮）
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>
2 个解决方案
解决方案1
0 2021-10-21 19:26:13
Well, simple plnkr: https://plnkr.co/edit/B0X1xV2JXnUWLaGu?preview好吧，简单的 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>
解决方案2
0 2021-10-21 19:34:55
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.