Can't change html select selected value in javascript

Question

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?

It looks like you may be using the select2 plugin, which I believe has its own methods for setting the selected value. — Heretic Monkey, May 17 '17 at 19:46
@Gavin selectedText is OK. I put and alert to see if it enters in that 'if'. — gregoryp, May 17 '17 at 19:47
Why aren't you using the HtmlHelper for a dropdown if you're using [tag:asp.net-mvc]? — Erik Philips, May 17 '17 at 19:52
@ErikPhilips and how can I achieve what I want if HtmlHelper? — gregoryp, May 17 '17 at 20:21
@MikeMcCaughan THANK YOU! Just found the answer here:http://stackoverflow.com/questions/19639951/how-do-i-change-selected-value-of-select2-dropdown-with-jqgrid — gregoryp, May 17 '17 at 20:27
Possible duplicate of [How do I change selected value of select2 dropdown with JqGrid?](http://stackoverflow.com/questions/19639951/how-do-i-change-selected-value-of-select2-dropdown-with-jqgrid) — Heretic Monkey, May 17 '17 at 20:31

score 2 · Answer 1 · answered May 17 '17 at 19:46

2

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 combo-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");
     }
   }

answered May 17 '17 at 19:46

Ehsan Sajjad

61,834
16
105
160

debug via dev console in chrome and see the code execution flow, chances are if block is skipped as condition may not evaluate to true – Ehsan Sajjad May 17 '17 at 20:00
The condition is true – gregoryp May 17 '17 at 20:01

score 2 · Answer 2 · answered May 17 '17 at 19:48

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

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

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

edited May 23 '17 at 12:10

Community

1
1

answered May 17 '17 at 20:30

gregoryp

920
4
15
35

Can't change html select selected value in javascript

3 Answers3