首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现类似51job上的地区选择效果示例

Posted in Javascript onNovember 17, 2016

本文实例讲述了JS实现类似51job上的地区选择效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>地区选择效果</title></head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
BODY {
FONT-SIZE: 12px; PADDING-TOP: 50px
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.bton {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
}
.cont {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
#main {
MARGIN: 0px auto; WIDTH: 400px
}
#selectItem {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px
}
#preview {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
}
#result {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
}
.tit {
PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px
}
.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; OVERFLOW: hidden; HEIGHT: 0px
}
#bg {
DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7
}
.hidden {
DISPLAY: none
}
.move {
CURSOR: move
}
</style>
<meta content="MSHTML 6.00.2900.3314" name="GENERATOR" />
<div id="main"><input pointer" onclick="openBg(1);openSelect(1)" type="button" name="button" value="请选择" />
<div id="result">
<div bgc_eee">
<h2>您已选择的城市汇总</h2>
</div>
<div id="makeSureItem"></div>
</div>
</div>
<div id="bg"></div>
<div id="selectItem">
<div bgc_ccc move" onmousedown="drag(event,this)">
<h2 right" onclick="openBg(0);openSelect(0);">[取消]</span> <span right" onclick="makeSure();">[确定]</span> </div>
<div id="selectSub"><select style="MARGIN-BOTTOM: 10px" onchange="showSelect(this.value)" name="">
<option value="0" selected="selected">第0层</option>
<option value="1">第1层</option>
<option value="2">第2层</option>
<option value="3">第3层</option>
</select>
<div id="c00"><input onclick="addPreItem()" type="checkbox" name="ck00" value="北京" />北京 <input onclick="addPreItem()" type="checkbox" name="ck00" value="福建" />福建 <input onclick="addPreItem()" type="checkbox" name="ck00" value="四川" />四川 <input onclick="addPreItem()" type="checkbox" name="ck00" value="江苏" />江苏 </div>
<div id="c01"><input onclick="addPreItem()" type="checkbox" name="ck01" value="上海" />上海 <input onclick="addPreItem()" type="checkbox" name="ck01" value="云南" />云南 <input onclick="addPreItem()" type="checkbox" name="ck01" value="贵州" />贵州 </div>
<div id="c02"><input onclick="addPreItem()" type="checkbox" name="ck01" value="黑龙江" />黑龙江 <input onclick="addPreItem()" type="checkbox" name="ck01" value="吉林" />吉林 <input onclick="addPreItem()" type="checkbox" name="ck01" value="辽宁" />辽宁 </div>
<div id="c03"><input onclick="addPreItem()" type="checkbox" name="ck01" value="美国" />美国 <input onclick="addPreItem()" type="checkbox" name="ck01" value="阿富汗" />阿富汗 <input onclick="addPreItem()" type="checkbox" name="ck01" value="日本" />日本 </div>
</div>
</div>
<div id="preview">
<div bgc_eee c_999">
<h2>您已选择的城市</h2>
</div>
<div id="previewItem"></div>
</div>
</div>
<SCRIPT type=text/javascript>
/* ------使用说明----- */
/*
添加城市方法：
  添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增
添加二级傅选矿选项
复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。
*/
var grow = $("selectSub").getElementsByTagName("option").length; //组数
var showGrow = 0;//已打开组
var selectCount = 0; //已选数量 
showSelect(showGrow);
var items = $("selectSub").getElementsByTagName("input");
//alert(maxItem);
//var lenMax = 2; 
//alert(1);
function $(o){ //获取对象
if(typeof(o) == "string")
return document.getElementById(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("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;
}
}
}
/* 鼠标拖动 */
var oDrag = "";
var ox,oy,nx,ny,dy,dx;
function drag(e,o){
var e = e ? e : event;
var mouseD = document.all ? 1 : 0;
if(e.button == mouseD)
{
oDrag = o.parentNode;
//alert(oDrag.id);
ox = e.clientX;
oy = e.clientY;
}
}
function dragPro(e){
if(oDrag != "")
{
var e = e ? e : event;
//$(oDrag).style.left = $(oDrag).offsetLeft + "px";
//$(oDrag).style.top = $(oDrag).offsetTop + "px";
dx = parseInt($(oDrag).style.left);
dy = parseInt($(oDrag).style.top);
//dx = $(oDrag).offsetLeft;
//dy = $(oDrag).offsetTop;
nx = e.clientX;
ny = e.clientY;
$(oDrag).style.left = (dx + ( nx - ox )) + "px";
$(oDrag).style.top = (dy + ( ny - oy )) + "px";
ox = nx;
oy = ny;
}
}
document.onmouseup = function(){oDrag = "";}
document.onmousemove = function(event){dragPro(event);}
</SCRIPT>

运行效果图如下：

JS实现类似51job上的地区选择效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现类似51job上的地区选择效果示例

- Author -

wdguohui

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 #Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 #Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 #Javascript
leaflet的开发入门教程
Nov 17 #Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 #Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 #Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 #Javascript
天线(6) 发报机(1) ICF-7600(1) 电路图(1) SONY(15) 德劲(5) 索尼(5) 短波(1) 电台(1) PL-880(1)
You might like
来自PHP.NET的入门教程
2006/10/09 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
js实现图片切换（动画版）
2016/12/25 Javascript
vue 实现LED数字时钟效果（开箱即用）
2019/12/08 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
园林技术个人的自我评价
2014/01/08 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
湘江北去观后感
2015/06/15 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
日元符号 ¥
2022/02/17 杂记