如何獲得我單擊以顯示在下拉列表下方的下拉值

Question

我的老師希望我使用 JavaScript 和 HTML 創建這個程序，其中數組值顯示在下拉列表中，然后當我單擊下拉值時，它會在下拉列表下方的段落中顯示我單擊的下拉值。 我已經創建了包含數組值的下拉列表。 （要顯示下拉值，首先您必須單擊顯示“單擊此處”的按鈕）

 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>

Answer 1

好吧，簡單的 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>

Answer 2

我解決了它，但在我看來，您應該先嘗試尋找答案，或者至少讓我們了解您迄今為止嘗試過的內容。 我不確定，但感覺就像你要求做功課一樣。

我只添加了以下部分來快速解釋它是如何完成的。 您可能想要修改它以獲得所需的結果。

// --------------------
GFG_Fun();

$('#arr').change(function() {
  var newText = $('#arr option:selected').val();
  $('#gfg').append('<p>' + newText + '</p>')
});
// --------------------

這是工作解決方案：

 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>

如何獲得我單擊以顯示在下拉列表下方的下拉值

問題描述

2 個解決方案

解決方案1
0 2021-10-21 19:26:13

解決方案2
0 2021-10-21 19:34:55

如何獲得我單擊以顯示在下拉列表下方的下拉值

問題描述

2 個解決方案

解決方案1 0 2021-10-21 19:26:13

解決方案2 0 2021-10-21 19:34:55

解決方案1
0 2021-10-21 19:26:13

解決方案2
0 2021-10-21 19:34:55