tags:

views:

58

answers:

1
+1  Q: 

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

Hi,

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.

EDIT 2

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

EDIT

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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

Thanks

A: 

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);
};
madeinstefano  2010-10-26 11:57:35
I'm very new to javascript and jQuery and I'm not sure what do you want me to do :( my current code is in a 'normal' function and is called inside a $(document).read isn't enough?
rubdottocom  2010-10-26 13:43:35
It already is wrapped in an anonymous function which is passed to ready().
MattC  2010-10-26 13:46:40
Yes, if you're using $(document).ready(function (){ }); you're rgiht.
madeinstefano  2010-10-26 13:47:43
I tested here your code and it works!
madeinstefano  2010-10-26 13:48:32
u_u The problem persists, can be a problem in versions? I simplified the code (JS in same page, a complete copy/paste from madeinstefano ^^u), i updated the code, but doesn't work :-S
rubdottocom  2010-10-26 14:46:28
OMFG! jQuery 1.4.2 Fails but 1.4.3 works great >_____< but when and how! OK, thanks everybody :-D now works
rubdottocom  2010-10-26 15:05:07
I copied your entire page code, then I created .html file, put the code in it, and it works. Do you have sure that the jquery is actually on that folder?
madeinstefano  2010-10-26 15:08:38
If you execute in Fiddle and change jquery from 1.4.3 to 1.4.2 you can see my error :-S http://jsfiddle.net/XmPas/
rubdottocom  2010-10-26 15:25:37

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript