title: HTML selected option not changing when user chooses different option
body: <p>I'm having some issues with a dropdown I created with HTML. The options that populate the select dropdown come from my database. I want the user to be able to choose a place type (job, school, work etc.) from the dropdown, once selected the user can click on the map to drop a point or type in the address. <br>
  The input for the address is disabled until the user selects something from the dropdown. My problem is that the selected dropdown option does not reflect the change to the user. It's just stuck on the job option, but when you click on the map the point and the correct label title is placed.<br><br></p>
  
  <p><a href="https://i.stack.imgur.com/qDZba.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qDZba.png" alt="http://i.imgur.com/aTRRdNb.png"></a></p>
  
  <p>HTML:<br></p>
  
  <pre><code>&lt;select name="places" id="places" class="form-control" onchange="addPlace(this)"&gt;
          &lt;option value="" selected disabled=""&gt;Choose one&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>JavaScript:<br></p>
  
  <pre><code>function addPlace() {
  
      places = document.getElementById("places");
      place = places.options[places.selectedIndex].textContent;
  
      if (place.value === "") {
          alert("Alert Message");
          document.getElementById("address").disabled = true;
      } else {
          document.getElementById("address").disabled = false;
      }
  
      if (place !== "") {
          placeTogo.push(place);
          if (map1 === undefined) {
              loadAPI();
          }
      } else if (place == "Other") {
          placeId = places.selectedIndex + 1;
  
      } else {
          placeId = places.selectedIndex + 1;
          placeTogo.push(place);
  
          if (map1 === undefined) {
              loadAPI();
          }
      }
  
      for (var i = 0; i &lt; places.length; i++) {
          places[i].selected = false;
      }
  
  }
  </code></pre>