How can I get a dropdown value I click on to display below the dropdown-CodePudding

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. 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>

CodePudding user response：

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>

CodePudding user response：

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>