How to set selected value to multiple Select inputs with jQuery?

I have 2 select inputs and I filling them with an array of years. After that I want to set currentYear the selected value for every Select. I hacve this code but only works with first Select I don't understand why.

Everything works great with jQuery 1.4.3, 1.4.2 fails :_(

I'm trying this without success :-( only fisrt has selected value OK. Can be a problem in versions? IE6, asp.net 2.0, jquery 1.4.2. For example, "$(sinceComboSelector).val(currentYear);" doesn't work i have to do a "$('#cmbAnyDesde option[value=' + currentYear + ']').attr('selected', 'selected');" :-(

Code updated:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tests.aspx.cs" Inherits="Tests" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../JAVASCRIPT/jquery-1.4.2.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                loadYears();
            });
            var loadYears = function() {
                var currentYear = new Date().getFullYear(),
                    years = [],
                    firstYear = currentYear - 7,
                    lastYear = currentYear + 3,
                    sinceComboSelector = "#cmbAnyDesde",
                    toComboSelector = "#cmbAnyHasta",
                    i;
    
                for (i = firstYear; i <= lastYear; i++) {
                    years.push(i);
                }
    
                $(sinceComboSelector).find('option').remove();
    
                $(toComboSelector).find('option').remove();
    
                $.each(years, function(key, value) {
                    $(sinceComboSelector)
                      .append($("<option></option>")
                      .attr("value", value)
                      .text(value));
    
                    $(toComboSelector)
                      .append($("<option></option>")
                      .attr("value", value)
                      .text(value)); ;
                });
    
    //            $(sinceComboSelector).val(currentYear);
    //            $(toComboSelector).val(currentYear);
                $('#cmbAnyDesde option[value=' + currentYear + ']').attr('selected', 'selected');            
                $('#cmbAnyHasta option[value=' + currentYear + ']').attr('selected', 'selected');
            }; 
        </script>
        <form id="form1" runat="server">
        <div>
            <select id="cmbAnyDesde" style="width:70px"></select>
            <select id="cmbAnyHasta" style="width:70px"></select>
        </div>
        </form>
    </body>
</html>

Solution

I tested here, with this code above, and works:

$(document).ready(function (){

  loadYears();

});

var loadYears = function () {
  var currentYear = new Date().getFullYear(),
    years = [],
    firstYear = currentYear - 7,
    lastYear = currentYear + 3,
    sinceComboSelector = "#cmbAnyDesde",
    toComboSelector = "#cmbAnyHasta",
    i;

  for (i = firstYear; i <= lastYear; i++){
    years.push(i);
  }

  $(sinceComboSelector).find('option').remove();

  $(toComboSelector).find('option').remove();

  $.each(years, function(key, value) {
    $(sinceComboSelector)
      .append($("<option></option>")
      .attr("value", value)
      .text(value));

    $(toComboSelector)
      .append($("<option></option>")
      .attr("value", value)
      .text(value)); ;
  });

  $(sinceComboSelector).val(currentYear);
  $(toComboSelector).val(currentYear);
};