select dropdownlist selected value not showing. RSS

• • Reply
  

  viperassasin

  Member

  35 Points

  49 Posts

  select dropdownlist selected value not showing.

  Nov 24, 2012 06:10 PM|LINK

  I have a states and cities dropdown list in an mvc3 web application. I want after the state has changed for the cities dropdown list to to return to the intial value wich is <option value>--Select--</option>. Here is the form and my code.

  <table>
              <tr>
                  <td>
                      State:
                  </td>
                  <td>
                      @Html.DropDownList("States", "--Select--")
                  </td>
              </tr>
              <tr>
                  <td>
                      City:
                  </td>
                  <td>
                      @Html.DropDownList("Cities", "--Select--")
                  </td>
              </tr>
          </table>

  <script type="text/javascript">
      $(document).ready(function () {
          //        alert("Ready");
          $('#States').change(function () {
              var state = $(this).val();
              if (state) {
                  //                alert("State was Active");
                  var cityValue = $('#Cities').val();
                  
                  if (cityValue != "") {
                      //                    $("#Cities option[value='']").attr('selected', true)
                      var newValue = "";
                      $('#Cities').val(newValue).trigger('change');
                  }
  
  
                  $.getJSON('@Url.Action("GetCitiesByState")', { state: state }, function (items) {
                      //                    alert("GetJSON");
                      $('#Cities').get(0).options.length = 0;
                      $('#Cities').get(0).options[0] = new Option("--Select--", "");
                      $.each(items, function (index, item) {
                          $('#Cities').get(0).options[$('#Cities').get(0).options.length] = new Option(item.Text, item.Value);
                      }); //end for each
                  }); //end getJSON
              }
          });
      });
      
  </script>

  The selected value seems to change behind the scenes but the dropdownlist visually doesn't reflect the change to the empty selected value. The cities dropdown list only changes if I click on it and change it.

  • Edited by viperassasin on Nov 24, 2012 06:13 PM
  • Edited by viperassasin on Nov 24, 2012 06:13 PM
• • Reply
  

  stmarti

  Contributor

  4963 Points

  1036 Posts

  Re: select dropdownlist selected value not showing.

  Nov 25, 2012 09:10 AM|LINK

  This is not valid javascript, you cannot create an option dom element this way:
  

  new Option("--Select--", "")

  One way in jQuery to create on option tag for select:

  $( "#Cities" ).append( $( "<option></option>" ).val( "the value of the option" ).text( "the text of the option" ).prop( "selected", "teue/false" ) );

  Without jQuery you can use

  var test = document.createElement( "option" ); // --> to create an option dom element

  test.text = "...";

  test.value = "...";

  document.getElementById( "Cities" ).options.add( test );

• • Reply
  

  viperassasin

  Member

  35 Points

  49 Posts

  Re: select dropdownlist selected value not showing.

  Nov 25, 2012 04:14 PM|LINK

  Actually it is valid and I have created plenty of dropdown lists this way. That is not my issue that I asked about. I need to revert my dropdown list to the value="" everytime the state dropdown list changes. My dropdowns are being created perfectly fine. There is more than one way to skin a cat in jquery and javascript.

• • Reply
  

  bruce (sqlwo...

  All-Star

  36656 Points

  5438 Posts

  Re: select dropdownlist selected value not showing.

  Nov 26, 2012 12:05 AM|LINK

  try:
  
   $('#Cities').get(0).options[0].selected=true;
  
  or:
  
   $('#Cities').get(0).selectedIndex = 0;
  
  or:
  
    $('#Cities option:eq(0)').prop('selected',true);
  
  or:
  
    $('#Cities option:[value=""]').prop('selected',true);

  bruce (sqlwork.com)
  • Edited by bruce (sqlwork.com) on Nov 26, 2012 12:05 AM
• • Reply
  

  viperassasin

  Member

  35 Points

  49 Posts

  Re: select dropdownlist selected value not showing.

  Nov 27, 2012 07:45 PM|LINK

  Thanks for trying at it. All of thes gave the correct value on doing an alert on each one but the dropdown list still did not change in any of the scenerios.

• • Reply
  

  stmarti

  Contributor

  4963 Points

  1036 Posts

  Re: select dropdownlist selected value not showing.

  Nov 28, 2012 06:20 AM|LINK

  I think the easiest way to debug this using firebug in firefox. After your dropdown is repopulated in the getJson function, use firebug command window, and paste bruce's suggested statements, run it and see what happens. If the dropdown doesn't select the correct value: you have a broken browser or the empty option not present at all in the select element (use firebug inspect to check this) or selecting a value in the dropdown trigger something in your code which clears the selection.

  • Marked as answer by Yanping Wang - MSFT on Nov 30, 2012 02:40 AM