js实现简单的星级选择器提交效果适用于评论等

　　<form action="" method="get">

　　<div id="star_level" star_width="14">

　　<p>服务</p>

　　<ul class="star_rating">

　　<li style="display:none;">

　　<input type="text" name="serve" value="" />

　　</li>

　　<li class="current_rating">default level</li>

　　<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>

　　<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>

　　<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>

　　<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>

　　<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>

　　</ul>

　　<p>价格</p>

　　<ul class="star_rating">

　　<li style="display:none;">

　　<input type="text" name="price" value="" title="这里设置为2的话，表示默认2颗星亮。" />

　　</li>

　　<li class="current_rating">default level</li>

　　<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>

　　<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>

　　<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>

　　<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>

　　<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>

　　</ul>

　　<p>质量</p>

　　<ul class="star_rating">

　　<li style="display:none;">

　　<input type="text" name="mass" value="" />

　　</li>

　　<li class="current_rating">default level</li>

　　<li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>

　　<li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>

　　<li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>

　　<li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>

　　<li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>

　　</ul>

　　</div>

　　<input type="submit" value="提交后请看地址栏的参数" />

　　</form>

　　<script type="text/javascript">

　　<!--

　　function __start(){

　　var initialize_width=0;

　　if(document.getElelmentById){return false};

　　if(document.getElementsByTagName==null){return false;}

　　var startLevelObj=document.getElementById("star_level")

　　if(startLevelObj==null){return false;}

　　initialize_width=parseInt(startLevelObj.getAttribute("star_width"),10);

　　if(isNaN(initialize_width) || initialize_width==0){return false;}

　　var ul_obj=startLevelObj.getElementsByTagName("ul");

　　if(ul_obj.length<1){return false;}

　　var length=ul_obj.length;

　　var li_length=0;

　　var a_length=0;

　　var li_obj=null;

　　var a_obj=null;

　　var defaultInputObj=null;

　　var defaultValue=null;

　　for(var i=0;i<length;i++){

　　li_obj=ul_obj[i].getElementsByTagName("li");

　　li_length=li_obj.length;

　　if(li_length<0){return false;}

　　//获取默认值

　　defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;}

　　defaultValue=parseInt(defaultInputObj[0].value,10);

　　if(!isNaN(defaultValue) && defaultValue!=0){

　　//alert("有初始值!");

　　//li_obj[1].style.width=initialize_width*defaultValue+"px";

　　//defaultValue=0;

　　}

　　for(var j=0;j<li_length;j++){

　　a_obj=li_obj[j].getElementsByTagName("a");

　　if(a_obj.length<1){continue;}

　　if(a_obj[0].className.indexOf("star")>0){

　　a_obj[0].onclick=function(){

　　return give_value(this);

　　}

　　a_obj[0].onfocus=function(){

　　this.blur();

　　}

　　}

　　}

　　}

　　}

　　function give_value(obj){

　　var status=true;

　　var parent_obj=obj.parentNode;

　　var i=0;

　　while(status){

　　i++;

　　if(parent_obj.nodeName=="UL"){break;}

　　parent_objparent_obj=parent_obj.parentNode;

　　if(i>1000){break;}//防止找不到ul发生死循环

　　}

　　var hidden_input=parent_obj.getElementsByTagName("input")[0];

　　if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;}

　　var txt=obj.firstChild.nodeValue;//确保不能存在空格哦，因为这里用的firstChild

　　if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}

　　hidden_input.setAttribute("value",txt.toString());

　　//固定选中状态,先找到初始化颜色那个li

　　var current_li=parent_obj.getElementsByTagName("li");

　　var length=current_li.length;

　　var ok_li_obj=null;

　　for(var i=0;i<length;i++){

　　if(current_li[i].className.indexOf("current_rating")>=0){

　　ok_li_obj=current_li[i];break;//找到

　　}

　　}

　　__current_width=txt*14;

　　ok_li_obj.style.width=__current_width+"px";

　　return false;

　　}

　　__start();

　　//-->

　　</script>

　　body{font-size:12px;}

　　ul{padding:0;margin:0;}

　　/*star.css*/

　　.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}

　　.star_rating li{padding:0;margin:0;float:left;}

　　.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}

　　.star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}

　　.star_rating a.one_star{left:0;}

　　.star_rating a.one_star:hover{width:14px;}

　　.star_rating a.two_stars{left:14px;}

　　.star_rating a.two_stars:hover{width:28px;}

　　.star_rating a.three_stars{left:28px;}

　　.star_rating a.three_stars:hover{width:42px;}

　　.star_rating a.four_stars{left:42px;}

　　.star_rating a.four_stars:hover{width:56px;}

　　.star_rating a.five_stars{left:56px;}

　　.star_rating a.five_stars:hover{width:70px;}

　　.star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}

　　/*end star.css*/

　　#star_level{margin:0 0 20px 20px;}

　　#star_level p{margin:20px 0 5px 0;}