title: Jquery to reset dropdownlist's selected index is not working
body: <p>I have a check box and a dropdownlist on my mvc4 razor page</p>
  
  <p>when I uncheck my check box ,i need to reset my dropdownlist's selection to 0</p>
  
  <pre><code>$("#chkProcess").click(function (event) {
          //on-click code goes in here.
          var chkProcess = $(this);
          if (chkProcess.is(':checked')) {
             //do process
          } else {
              $('#locationSelectList').val('0');
              alert("" + $("#locationSelectList option:selected").val());
  
          }
      });
  </code></pre>
  
  <p>When I uncheck my checkbox ,I am getting the alert showing selected Index=0,but on the screen its not actually reflecting the change.
  But I need the dropdown to reset the selection on the screen also .Why I am seeing this behaviour and what am I doing wrong here? </p>
  
  <p>I have these Jquery files referenced on my _layout page</p>
  
  <pre><code>    &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.treeview.js")" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script src="@Url.Content("~/Scripts/jquery.ui.selectmenu.js")" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I tried all these</p>
  
  <pre><code>$('#locationSelectList').attr('selectedIndex', '0');
   $('#locationSelectList').val('0');
  </code></pre>
  
  <p>but I can see in alert message its resetting the selected index,but not getting same reflected on the page.</p>