title: Can't change html select selected value in javascript
body: <p>I need to change the 'selected' attribute of a html option element within a select object using javascript.</p>
  
  <p>I already tried this: <a href="https://stackoverflow.com/questions/78932/how-do-i-programmatically-set-the-value-of-a-select-box-element-using-javascript">Solution</a></p>
  
  <p>This is what I have:</p>
  
  <p>.cshtml</p>
  
  <pre><code>&lt;div class="form-group form-group-default" id="divStateEUA"&gt;
     &lt;label&gt;Estado&lt;/label&gt;
     &lt;select id="listStateEUA" name="listStateEUA" data-init-plugin="select2" style="width: 100%"&gt;
        @foreach (var state in ViewBag.EUAStates)
        {
           &lt;option&gt;@state&lt;/option&gt;
        }
       &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>&lt;script&gt;
      $(document)
          .ready(function () {
                   CheckState();
      });
  
     function CheckState() {
       if (selectedText == 'Estados Unidos') {
          var element = document.getElementById('listStateEUA');
          element.value = 'Chicago';
       }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>rendered html:</p>
  
  <p><a href="https://i.stack.imgur.com/bQLGS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQLGS.png" alt=""></a></p>
  
  <p>And still not working. Any ideas?</p>