We help IT Professionals succeed at work.

how to modify selected in li list using jquery

iskibinska
iskibinska asked
on
Hello , I have the following list:

<ul>
           <li class="li"><a href="javascript:;">
             <span class="selected"> 2010  </span></a><ul>
              <li class="li"><a href="javascript:;" title="2000" class="">2000</a></li>
              <li class="li"><a href="javascript:;" title="2001" class="">2001</a></li>
              <li class="li"><a href="javascript:;" title="2002" class="">2002</a></li>
              <li class="li"><a href="javascript:;" title="2003" class="">2003</a></li>
              <li class="li"><a href="javascript:;" title="2004" class="">2004</a></li>
              <li class="li"><a href="javascript:;" title="2005" class="">2005</a></li>
              <li class="li"><a href="javascript:;" title="2006" class="">2006</a></li>
              <li class="li"><a href="javascript:;" title="2007" class="selected">2007</a></li>
              <li class="li"><a href="javascript:;" title="2008" class="">2008</a></li>
              <li class="li"><a href="javascript:;" title="2009" class="">2009</a></li>
              <li class="li"><a href="javascript:;" title="2010" class="">2010</a></li>
           </ul>
             
              </li>
             </ul>
           
how to change class in jquery to selected  to the year i will get from
 <input type = "hidden" name="years" id="years" size="13" />

 hidden field
Comment
Watch Question

Here is a working sample.  I've added classes to clarify what I am selecting.  Also, the input type is text (for testing) but you can just change the type= attribute to "hidden" for production.
<!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>Untitled Page</title>
      <head>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
			<style>
				* {margin:0;padding:0;}

				html, body
				{

					font-family: Arial;
					font-size: .95em;
					height: 100%;
					width: 100%;
					border: 0;
					padding: 0;
					margin: 0;
					line-height:1em;
					font-weight:normal;
				}

				.selected {background:#ffc;border:solid 1px gray; padding:2px;}

			</style>
      </head>
</head>
<body>

	<ul style="margin:20px;">
	   <li class="li"><a href="javascript:;">
		 <span class="selected"> 2010  </span></a>
		 	<ul class="yearlist" style="margin-top:10px;">
				<li class="li"><a href="javascript:;" title="2000" class="">2000</a></li>
				<li class="li"><a href="javascript:;" title="2001" class="">2001</a></li>
				<li class="li"><a href="javascript:;" title="2002" class="">2002</a></li>
				<li class="li"><a href="javascript:;" title="2003" class="">2003</a></li>
				<li class="li"><a href="javascript:;" title="2004" class="">2004</a></li>
				<li class="li"><a href="javascript:;" title="2005" class="">2005</a></li>
				<li class="li"><a href="javascript:;" title="2006" class="">2006</a></li>
				<li class="li"><a href="javascript:;" title="2007" class="selected">2007</a></li>
				<li class="li"><a href="javascript:;" title="2008" class="">2008</a></li>
				<li class="li"><a href="javascript:;" title="2009" class="">2009</a></li>
				<li class="li"><a href="javascript:;" title="2010" class="">2010</a></li>
	   		</ul>
		</li>
	 </ul>

	<input type="text" id="years" />



	<script type="text/javascript">

		$(document).ready(function(){
			$("ul.yearlist li").each(function(){
				$(this).children("a").click(function(){
					$("ul.yearlist li > a").removeClass("selected")
					$("#years").val($(this).text());



					$(this).addClass("selected")
				});
			});
		});



	  </script>

    </form>
</body>
</html>

Open in new window

Author

Commented:
Perfect, if you could also tell me how to change the top year  (2010) to the one selected in the list
that would be awesome

Author

Commented:
the year gets returned in ( #years.)val()

Author

Commented:
ok, i just noticed it is doing this in the bottom fields. Duh. Thanks a lot