仿51job.com城市选择框特效

最新推荐文章于 2018-03-27 09:08:28 发布

原创最新推荐文章于 2018-03-27 09:08:28 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

C# 专栏收录该内容

17 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的城市选择器示例。该选择器允许用户通过多级下拉菜单选择多个城市，并实时预览已选择的城市。最终选择的城市会显示在页面上，方便收集用户的输入。

http://www.alixixi.com/Dev/HTML/jsrun/zh/2008/2008051480203.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<!--

body{padding-top:50px;font-size:12px;}

h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}

.bton{border:1px solid #CCC;background:#DDD;}

.cont{padding:10px;}

#main{width:400px;margin:0px auto;}

#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}

#preview{margin:1px;border:1px solid #CCC;}

#result{border:1px solid #CCC;margin-top:10px;}

.tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}

.bgc_ccc{background:#CCC;}

.bgc_eee{background:#eee;}

.c_999{color:#999}

.pointer{cursor:pointer;}

.left{float:left;}

.right{float:right;}

.cls{clear:both;font-size:0px;height:0px;overflow:hidden;}

#bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}

.hidden{display:none;}

.move{cursor:move;}

-->

</style>

</head>

<body>

<h2>您已选择的城市汇总</h2>

</div>

</div>

</div>

<h2 class="left">请选择城市</h2>

</div>

</select>

<input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京

<input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建

<input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川

<input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏

</div>

<input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海

<input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南

<input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州

</div>

<input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江

<input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林

<input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁

</div>

<input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国

<input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗

<input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本

</div>

<h2>您已选择的城市</h2>

</div>

</div>

var grow = $("selectSub").getElementsByTagName_r("option").length; //组数

var showGrow = 0;//已打开组

var selectCount = 0; //已选数量

showSelect(showGrow);

var items = $("selectSub").getElementsByTagName_r("input");

//alert(maxItem);

//var lenMax = 2;

//alert(1);

function $(o){ //获取对象

if(typeof(o) == "string")

return document.getElementByIdx_x_x(o);

return o;

}

function openBg(state){ //遮照打开关闭控制

if(state == 1)

{

$("bg").style.display = "block";

var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;

//alert(document.body.offsetHeight);

//alert(document.documentElement.offsetHeight);

$("bg").style.height = h + "px";

}

else

{

$("bg").style.display = "none";

}

function openSelect(state){ //选择城市层关闭打开控制

if(state == 1)

{

$("selectItem").style.display = "block";

$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";

$("selectItem").style.top = document.body.scrollTop + 100 + "px";

}

else

{

$("selectItem").style.display = "none";

}

function showSelect(id){

for(var i = 0 ; i < grow ;i++)

{

$("c0" + i).style.display = "none";

}

$("c0" + id).style.display = "block";

showGrow = id;

}

function open(id,state){ //显示隐藏控制

if(state == 1)

$(id).style.display = "block";

$(id).style.diaplay = "none";

}

function addPreItem(){

$("previewItem").innerHTML = "";

var len　= 0 ;

for(var i = 0 ; i < items.length ; i++)

{

if(items[i].checked == true)

{

//len++;

//if(len > lenMax)

//{

// alert("不能超过" + lenMax +"个选项！")

// return false;

//}

var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;

$("previewItem").innerHTML += mes;

//alert(items[i].value);

}

function makeSure(){

//alert(1);

//$("makeSureItem").innerHTML = $("previewItem").innerHTML;

openBg(0);

openSelect(0);

copyItem("previewItem","makeSureItem")

}

function copyHTML(id1,id2){

$(id2).innerHTML = $("id1").innerHTML;

}

function copyItem(id1,id2){

var mes = "";

var items2 = $(id1).getElementsByTagName_r("input");

for(var i = 0 ; i < items2.length ; i++)

{

if(items2[i].checked == true)

{

mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;

}

$(id2).innerHTML = "";

$(id2).innerHTML += mes;

//alert($(id2).innerHTML);

}

function same(ck){

for(var i = 0 ; i < items.length ; i++)

{

if(ck.value == items[i].value)

{

items[i].checked = ck.checked;

}