title: show the values of dropdown button in a text box in html
body: <p><a href="https://i.stack.imgur.com/gUfAK.jpg" rel="nofollow noreferrer">enter image description here</a>i want to display the strings in the dropdown button in a text box one after the other by clicking on the dropdown. I have tried but it seems not to work. I also do not want the user to be able to type input, only click and display. Here's my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var mytextbox = document.getElementById('display');
  var mydropdown = document.getElementById('dropdown0');
  
  mydropdown.onchange = function() {
      mytextbox.value = this.value; //to change the value
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;form method="POST" action="addprocess.php"&gt;
      &lt;fieldset&gt;
          &lt;legend align="center"&gt;Semester Courses&lt;/legend&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
              &lt;label style="font-family: verdana; font-size: 25px;"&gt;&amp;emsp;&amp;emsp;&amp;emsp;BIOLOGY&amp;emsp;&lt;/label&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;input type="text" id="display" class="form-control" aria-label="Text input with dropdown button"&gt;
                      &lt;div class="input-group-btn"&gt;
                          &lt;button type="button" id="dropdown0" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                              Click to Select
                          &lt;/button&gt;
                          &lt;div class="dropdown-menu dropdown-menu-right"&gt;
                              &lt;option class="dropdown-item" value="BIOL 8803"&gt;BIOL 8803&lt;/option&gt;
                              &lt;div role="separator" class="dropdown-divider"&gt;&lt;/div&gt;
                              &lt;option class="dropdown-item" value="BIOL 8805"&gt;BIOL 8805&lt;/option&gt;
                              &lt;div role="separator" class="dropdown-divider"&gt;&lt;/div&gt;
                              &lt;option class="dropdown-item" value="BIOL 8807"&gt;BIOL 8807&lt;/option&gt;
                              &lt;div role="separator" class="dropdown-divider"&gt;&lt;/div&gt;
                              &lt;option class="dropdown-item" option value="BIOL 8809"&gt;BIOL 8809&lt;/option&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;input name="submit" type="submit" value="click to submit"&gt;
          &lt;input name="reset" type="reset" value="Reset"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would really appreciate your help, i do not know much of this, a part of it i copied from bootstrap website</p>
  
  <p><a href="https://i.stack.imgur.com/vIvXT.jpg" rel="nofollow noreferrer">images of what my code looks like when i run it on browser</a></p>