Coloring of Select html element by jquery

Question

Hi All,
I need some help with jquery script again :-) Just trying to play with jquery..I use script below for coloring options of select element. It works in pure html, but in my asp.net 2.0 (Master + Content pages) does not. Script is placed in Head section.

function pageLoad(){
   var allOddSelectOption  = "select option:odd";
   var evenStyle = "background-color:'#f4f4f4';color:'#555'";

   $(allOddSelectOption).attr('style',evenStyle);
}

I tried also use $(document).ready(function(){ but it didn't work too.

Any ideas, tips most welcome? Thanks, X.

Answer 1

Check css(properties), you can apply styles very easy.

$(document).ready(function(){
  $("select option:odd").css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
});

EDIT: For ASP .NET 2.0 $(document).ready() will work, since you can call it multiple times you will have no problem even if it's not in the head section.

---

For ASP .NET 3.5

You can add in your MasterPage a head placeholder like this:

<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

and then in your child pages you can put html into it by a Content tag:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  <script language="JavaScript>
    //Scripts here!
  </script>
</asp:Content>

Answer 2

You can find some useful things in this article.

Jquery and VS2008

Hope it helps.

Answer 3

ASP.Net decorates your element IDs when you are using master pages. It will put a lot of stuff up front, but leave your original ID at the end. Because of that, you can use a selector like this on ASP.Net server control renderings.

$("[id$=originalIdFromAspxPage]").attr...

The $= part means this will match any elements with an ID that ends with the ID you give it.

It's not quite as efficient as a direct ID selector, but it works like a charm on ASP.Net pages.

Answer 4

The tip from first answer works well. Thanks.

Just one funny thing, I have two select controls on page and the coloring on second select just continue as it would be just part of first one...so as first select has odd amount of items, the second first item continue in row and gets colored.
I guess in this case would be better just get all select controls from page in array, iterate the array and set the css on specific select control. I don't know...it may be the same. Will see, I'll try it later on...

Answer 5

I would say in every case to use .addClass rather than add inline css attributes. These are hard to maintain in javascript.

e.g $('#someDiv').addClass('odd');