澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

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

<li id=1>11111111111111111<a href="javascript:del(1);">del</a></li>
<li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li>
<li id=3>33333333333333333<a href="javascript:del(3);">del</a></li>
<li id=4>44444444444444444<a href="javascript:del(4);">del</a></li>
<li id=5>55555555555555555<a href="javascript:del(5);">del</a></li>

复制代码 代码如下:

function getulvalue(){
if($$('ul').childNodes.length==0){
alert("请选择相关内容!");
return;
}else{
var txt="";
for(var i=0;i<$$('ul').childNodes.length;i ){
txt =$$('ul').childNodes[i].id ",";
}
$$("ul_value").value=txt;
}

复制代码 代码如下:

}
</script>

没有用到js库,就是单独的js代码
图片 1 

复制代码 代码如下:

<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>

for(var i=0;i<ul_obj.length;i ){

没有用到js库,就是单独的js代码 复制代码 代码如下: form action="" method="get" div id="star_level" star_width="1...

<ul id="ul">

<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>

</ul>
<select name="car_type" id="car_type" onchange="add_car(this);" >
<option value="">please select</option>
<option value="car_11">11111</option>
<option value="car_22">22222</option>
<option value="car_33">33333</option>
<option value="car_44">44444</option>
</select >
<input type="text" id="ul_value" onclick="getulvalue();" name="ul_value" value="">
<script>

星级选择器,提交代码适用于评论等

if(flag){
add(car_id,txt);
}
}

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;}

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:js实现简单的星级选择器提交效果适用于评论等,