一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 页面特效

推荐专题

最新下载

1

蝎子模拟
122.10M 类型： 模拟经营
2

疯狂农场3冰河时代
86.17M 类型： 模拟经营
3

寄宿包租婆
60.96M 类型： 模拟经营
4

海科斯乱斗
111.32M 类型： 动作冒险
5

2026地铁逃生手机版
1.21GB 类型： 射击枪战
6

赛车经理3汉化无限金币最新版
241.69MB 类型： 赛车竞速
7

奇迹最强者华为版
1.17GB 类型： 动作冒险
8

皇室战争小绵羊版本
1.41 GB 类型： 策略卡牌
9

工艺战舰：重聚
101.48M 类型： 策略塔防
10

美味星球2
79.59M 类型： 休闲益智

热门教程

1

币安怎么充值和提现USDT？交易所划转到钱包的完整操作教程
时间：2026-08-13 类型： 游戏攻略
2

币安账户怎么保护安全？2FA验证、防钓鱼码和提现白名单设置步骤
时间：2026-08-13 类型： 游戏攻略
3

币安合约手续费是多少？U本位/币本位合约手续费与资金费率教程
时间：2026-08-13 类型： 游戏攻略
4

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
5

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
6

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
7

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
8

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
9

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
10

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略

javascript仿商品属性选择（仿淘宝商城）

时间：2022-07-02 14:50:26 编辑：袖梨来源：一聚教程网

method="post" name="delpost" >

提示：您可以先修改部分代码再运行

<p><style type="text/<a href=" http: target="_blank">css"; _fcksavedurl=http://1***11com.net/cssdiv/css.html target=_blank >css">

<!--
body{padding:20px;}
body,td,th {
	font-size: 12px;
}
a:link {
	color: #000000;
}
a:visited {
	color: #000000;
}
a:hover {
	color: #000000;
}

ul{list-style-type:none;}
ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}
ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}
ul li a:hover{border:2px solid #FF6701;margin:0px;}
.select{}
.select a{border:2px solid #FF6701;margin:0px;background:url(attachment.<a href=http://11*1com*.*net/phper/php.html target=_blank >php?aid=8763&noupdate=yes¬humb=yes) no-repeat no-repeat right bottom;}

--></style></p>
<script language="javascript">
window.onload=function(){

var color = new Select("color",{
		Radio :true	,	//是否为单选,默认为true,如果设置为true,Default,Max选项将失效
		OnClick:function(selected){
			document.form.color.value = selected.join(",")
		}
		
	});
	
	var size = new Select("size",{
		OnClick:function(selected){
			document.form.size.value = selected.join(",")
		}
	});
	
	var other = new Select("other",{
		Radio:false,
		Max:5,
		Default:"袜子,扣子",
		OnClick:function(selected){
			document.form.other.value = selected.join(",")
		}
	});
	
	
	
}
</script>
<form name="form">
    <table cellspacing="0" cellpadding="5" width="600" border="0">
        <tbody>
            <tr>
                <td width="77">颜色(单选)：</td>
                <td width="503">
                <ul id="color">
                    <li datavalue="red">
                    </li>
<li datavalue="blue">
                    </li>
<li datavalue="amethyst">
                    </li>
<li datavalue="green">
                </li>
</ul>
                </td>
            </tr>
            <tr>
                <td width="77">尺码(单选)：</td>
                <td width="503">
                <ul id="size">
                    <li datavalue="S">
                    </li>
<li class="select" datavalue="M">
                    </li>
<li datavalue="L">
                    </li>
<li datavalue="XL">
                </li>
</ul>
                </td>
            </tr>
            <tr>
                <td width="77">配件(多选)：</td>
                <td width="503">
                <ul id="other">
                    <li datavalue="袜子">
                    </li>
<li datavalue="扣子">
                    </li>
<li class="select" datavalue="盒子">
                    </li>
<li datavalue="袋子">
                    </li>
<li datavalue="鞋子">
                    </li>
<li datavalue="帽子">
                    </li>
<li datavalue="围巾">
                </li>
</ul>
                </td>
            </tr>
            <tr>
                <td width="77" height="100"> </td>
                <td width="503"> </td>
            </tr>
        </tbody>
    </table>
    <div id="result">
<input id="color" size="15" name="color" type="text"> <input id="size" size="15" name="size" type="text"> <input id="other" size="15" name="other" type="text">
</div>
</form>
<script language="javascript" type="text/javascript">
function Select(id,config){
	this.config = config||{};
	this.id = typeof(id)=='string'?document.getElementById(id):id;
	this.items = this.id.getElementsByTagName("li");
	this.selectClass = "select";
	this.selected = new Array();
	var _this = this;
	this.selectOpt = function(value,opt){
		var exist = false;
		for(var i=0;i<_this.selected.length;i++){
			if(_this.selected[i]==value){
				exist = true ;
				if(opt=="remove"){ _this.selected.splice(i,1);}
				break;
			}
		}
		if(!exist && opt=="add"){_this.selected.push(value);}
	};
	//初始化对象
	(function(_this){
		//是否有默认配置的选择项
		if(_this.config.Default){
			var arr = _this.config.Default.split(",");
			for(var i=0;i<arr.length;i++)_this.selectOpt(arr[i],"add");
		}
		for(var i=0;i<_this.items.length;i++){
			//将defalut中配置的项加上样式
			if( _this.selected.join(",").indexOf(_this.items[i].getAttribute('dataValue'))>-1 && _this.items[i].className==""){
				_this.items[i].className=_this.selectClass;
			}
			//如果有样式中定义了默认
			if(_this.items[i].className==_this.selectClass){
				_this.selectOpt(_this.items[i].getAttribute('dataValue'),"add");
			}
			//加点单击事件
			_this.items[i].onclick=function(){
				//是否为单选
				var radio = _this.config.Raido?_this.config.Raido:true;
				if(_this.config.Radio==null || _this.config.Radio){
					if(this.className!=_this.selectClass){
						var items = this.parentNode.getElementsByTagName("li");
						for(var i=0;i<items.length;i++){
							items[i].className="";
						}
						_this.selected.length = 0;
						_this.selected.push(this.getAttribute('dataValue'));
						this.className=_this.selectClass;
					}
				}else{
					var Max = _this.config.Max?_this.config.Max:1;
					if(this.className==_this.selectClass){
						this.className="";
						_this.selectOpt(this.getAttribute('dataValue'),"remove");
					}else{
						if(_this.selected.length>=Max){
							alert("最多只能选择"+Max+"项");
						}else{
							this.className=_this.selectClass;
							_this.selectOpt(this.getAttribute('dataValue'),"add");
						}
					}
				}
				//去掉那个虚线框
				this.firstChild.blur();
				//调用回调函数
				if(_this.config.OnClick)_this.config.OnClick.call(this,_this.selected);
				return false;
			}
		}
	})(_this);	
}

</script>

提示：您可以先修改部分代码再运行

相关文章

热门栏目