I need to change the 'selected' attribute of a html option element within a select object using javascript.

I already tried this: Solution

This is what I have:

.cshtml

<div class="form-group form-group-default" id="divStateEUA">
   <label>Estado</label>
   <select id="listStateEUA" name="listStateEUA" data-init-plugin="select2" style="width: 100%">
      @foreach (var state in ViewBag.EUAStates)
      {
         <option>@state</option>
      }
     </select>
</div>

javascript

<script>
    $(document)
        .ready(function () {
                 CheckState();
    });

   function CheckState() {
     if (selectedText == 'Estados Unidos') {
        var element = document.getElementById('listStateEUA');
        element.value = 'Chicago';
     }
   }
</script>

rendered html:

And still not working. Any ideas?

I need to change the 'selected' attribute of a html option element within a select object using javascript.

I already tried this: Solution

This is what I have:

.cshtml

<div class="form-group form-group-default" id="divStateEUA">
   <label>Estado</label>
   <select id="listStateEUA" name="listStateEUA" data-init-plugin="select2" style="width: 100%">
      @foreach (var state in ViewBag.EUAStates)
      {
         <option>@state</option>
      }
     </select>
</div>

javascript

<script>
    $(document)
        .ready(function () {
                 CheckState();
    });

   function CheckState() {
     if (selectedText == 'Estados Unidos') {
        var element = document.getElementById('listStateEUA');
        element.value = 'Chicago';
     }
   }
</script>

rendered html:

And still not working. Any ideas?

• javascript
• jquery
• html
• asp
• asp-mvc

• Can you post the rendered HTML code, please? – apires Commented May 17, 2017 at 19:42
• 2 Where is selectedText defined? – Gavin Commented May 17, 2017 at 19:43
• 1 It looks like you may be using the select2 plugin, which I believe has its own methods for setting the selected value. – Heretic Monkey Commented May 17, 2017 at 19:46
• @Gavin selectedText is OK. I put and alert to see if it enters in that 'if'. – gregoryp Commented May 17, 2017 at 19:47
• 1 Why aren't you using the HtmlHelper for a dropdown if you're using asp-mvc? – Erik Philips Commented May 17, 2017 at 19:52

3 Answers 3

You are missing value attribute in the option tag of select.

Modify your razor code to have value attribute in option tag, so that you can change the bo-box selection on basis of value :

 @foreach (var state in ViewBag.EUAStates)
 {
    <option value="@state">@state</option>
 }

and now in your jquery code, you should be able to do :

function CheckState() {
     if (selectedText == 'Estados Unidos') {
        $("#listStateEUA").val("Chicago");
     }
   }

You must provide a value for the options. Your JS is trying to set the select to the "Chicago" value, but none exists. <option>Chicago</option> vs <option value="Chicago">Chicago</option>

function CheckState() {
  var element = document.getElementById('listStateEUA');
  element.value = 'chicago';
}

CheckState();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <label>Estado</label>
  <select id="listStateEUA" name="listStateEUA">
    <option value="nevada">nevada</option>
    <option value="chicago">chicago</option>
    <option value="arizona">arizona</option>
  </select>

As Mike McCaughan suggested (thank you very much), since I'm using select2 plugin, it have a different way to get and set values.

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

Answer found here: select2 plugin get and set values