实现城市选择问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head id="Head1"><title>
无标题页
</title>
    <link type="text/css" href="Css/main.css" rel="Stylesheet" />
    <style type="text/css">
        .style14
        {
            width: 24px;
            height: 40px;
            vertical-align:middle;
        }
        .style15
        {
            width: 80px;
            height: 40px;
            vertical-align:middle;
        }
        .style16
        {
         width:707px;
         height: 40px;
            vertical-align:middle;
        }
        .style17
        {
         width: 300px;
            height: 25px;
            vertical-align:middle;
        }
        #div_area
        {
            width:500px;
            height:200px;
            background:#f5fcf2;
            border: 2px solid #9ebc90;
            margin-top:2px;
            margin-left:2px;
            float:left;
            overflow:hidden;
            position:absolute;
            left:450px;
            top:200px;
            cursor:move;
            float:left;
        }
    </style>
</head>
<body>
    <form name="form1" method="post" action="CreatResume.aspx" id="form1">
    <div id="body">
        <div class="center">
            <div class="center_03">
                <div class="c03_left"></div>
                <div class="c03_center">
                    <table style="border:0px; padding:0px;">
                        <tr>
                            <td class="style14"><img src="Images/CR_Center_03_01.gif" width="24px" height="19" alt=""/></td>
                            <td class="style15">工作类型 </td>
                            <td class="style16"><select name="ddl_worktype" id="ddl_worktype">
<option value="1">全职</option>
<option value="2">兼职</option>
</select></td>
                        </tr>
                        <tr>
                            <td class="style14"><img src="Images/CR_Center_03_01.gif" width="24px" height="19" alt=""/></td>
                            <td class="style15">地    点</td>
                            <td class="style16">
                                <a href="#" onclick="show('div_area');return false"><img src="Images/CR_Button_02.gif"
alt=""/></a>
                                  （可多选，最多5项）
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="c03_right"></div>
            </div>
        </div>
    </div>
    <div id="div_area" style="display:none;filter:alpha(opacity=100);opacity:1;">
        <div>
            <table>
                <tr style="width:500px; border:2px solid #008001;">
                    <td align="right" style="width:480px">
                        <a href="#" onclick="">确定</a>
                        <a href="#" onclick="closeed('div_area');return false">关闭</a>
                    </td>
                    <td style="width:20px"></td>
                </tr>
                <tr><td colspan="2"><hr style="color:#9ebc90; width:500px" /></td></tr>
                <tr>
                    <td style="width:480px" align="left">已选城市：<span id="sp_selectedarea"></span></td>
                    <td style="width:20px"></td>
                </tr>
                <tr><td colspan="2"><hr style="color:#9ebc90; width:500px" /></td></tr>
                <tr>
                    <td style="width:480px" align="left"> <span id="sp_arealist" style="font-size:14px;"><span

style="width:80px;text-align:left;height:18px; line-height:18px;"><a onclick="showspan('1000')" href="#">北京</a></span>

  <span id="1000" style="display:none;width:300px; height:100px; position:absolute;left:500px;top:1325px;border:2px

solid #008001">北京市</span><span style="width:80px;text-align:left;height:18px; line-height:18px;"><a onclick="showspan

('1001')" href="#">上海</a></span>   <span id="1001" style="display:none;width:300px; height:100px;

position:absolute;left:500px;top:1325px;border:2px solid #008001">上海市</span><span style="width:80px;text-

align:left;height:18px; line-height:18px;"><a onclick="showspan('1002')" href="#">天津</a></span>   <span id="1002"

style="display:none;width:300px; height:100px; position:absolute;left:500px;top:1325px;border:2px solid #008001">天津市

</span><span style="width:80px;text-align:left;height:18px; line-height:18px;"><a onclick="showspan('1003')" href="#">重庆

</a></span>   <span id="1003" style="display:none;width:300px; height:100px;

position:absolute;left:500px;top:1325px;border:2px solid #008001">重庆市</span><span style="width:80px;text-

align:left;height:18px; line-height:18px;"><a onclick="showspan('1004')" href="#">浙江省</a></span>   <span

id="1004" style="display:none;width:300px; height:100px; position:absolute;left:500px;top:1325px;border:2px solid #008001">衢

州市丽水市绍兴市温州市台州市宁波市舟山市杭州市湖州市嘉兴市金华市</span></br></span> </td>
                    <td style="width:20px"></td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript">
        var prox;
        var proy;
        var proxc;
        var proyc;
        function show(id)
        {/*--打开--*/
            clearInterval(prox);
            clearInterval(proy);
            clearInterval(proxc);
            clearInterval(proyc);
            var o = document.getElementById(id);
            o.style.display = "block";
            o.style.width = "1px";
            o.style.height = "1px";
            prox = setInterval(function(){openx(o,500)},10);
        }
        function showspan(id)
        {
            var o = document.getElementById(id);
            o.style.display="block";
        }
        function openx(o,x)
        {/*--打开x--*/
            var cx = parseInt(o.style.width);
            if(cx < x)
            {
                o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
            }
            else
            {
                clearInterval(prox);
                proy = setInterval(function(){openy(o,200)},10);
            }
        }
        function openy(o,y)
        {/*--打开y--*/
            var cy = parseInt(o.style.height);
            if(cy < y)
            {
                o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
            }
            else
            {
                clearInterval(proy);
            }
        }
        function closeed(id)
        {/*--关闭--*/
            clearInterval(prox);
            clearInterval(proy);
            clearInterval(proxc);
            clearInterval(proyc);
            var o = document.getElementById(id);
            if(o.style.display == "block")
            {
                proyc = setInterval(function(){closey(o)},10);
            }
        }
        function closey(o)
        {/*--打开y--*/
            var cy = parseInt(o.style.height);
            if(cy > 0)
            {
                o.style.height = (cy - Math.ceil(cy/5)) +"px";
            }
            else
            {
                clearInterval(proyc);
                proxc = setInterval(function(){closex(o)},10);
            }
        }
        function closex(o)
        {/*--打开x--*/
            var cx = parseInt(o.style.width);
            if(cx > 0)
            {
                o.style.width = (cx - Math.ceil(cx/5)) +"px";
            }
            else
            {
                clearInterval(proxc);
                o.style.display = "none";
            }
        }
        function additem(id)
        {
            var od = document.getElementById(id);
            od.innerHTML +="abcv";
        }
    </script>
<div>
</div>
</form>
</body>
</html>
想实现类似51job地区选择，点击省级城市弹出市级城市，没反应

17 个解决方案

#1

你的代码太长了，这里你应该用ajax处理，选择一个省份时，后面的一个下拉就绑定对应这个省对应的城市

#2

引用 1 楼 hdhai9451 的回复:

你的代码太长了，这里你应该用ajax处理，选择一个省份时，后面的一个下拉就绑定对应这个省对应的城市

dropdownlist 三级联动的已经实现了，现在想实现的类似51job里地区选择
红色的代码
<span style="width:80px;text- align:left;height:18px; line-height:18px;"> <a onclick="showspan('1004')" href="#">浙江省 </a> </span>    <span

id="1004" style="display:none;width:300px; height:100px; position:absolute;left:500px;top:1325px;border:2px solid #008001">衢

州市丽水市绍兴市温州市台州市宁波市舟山市杭州市湖州市嘉兴市金华市 </span>
就是点击浙江省弹出浙江省的城市

#3

function showspan(id)
{
var o = document.getElementById(id);
o.style.display="block";
}

#4

#div_area
        {
            width:500px;
            height:200px;
            background:#f5fcf2;
            border: 2px solid #9ebc90;
            margin-top:2px;
            margin-left:2px;
            float:left;
            overflow:hidden;
            position:absolute;
            left:450px;
            top:200px;
            cursor:move;
            float:left;
        }
问题好像出在样式表上

#5

我倒，楼主真是太牛了，一上来二话不说，直接帖上这么长的代码

#6

引用 1 楼 hdhai9451 的回复:

你的代码太长了，这里你应该用ajax处理，选择一个省份时，后面的一个下拉就绑定对应这个省对应的城市

同意！

#7

就根据选中省查询所有城市不就ok了吗

#8

找到问题了，但是很奇怪，样式表影响javascript的执行
如果去掉position:absolute;
就可以

#9

使用 ICallbackEventHandler 实现无刷新回调

#10

一个城市选择能用这么多代码
去这里下载现成的demo
http://download.csdn.net/source/1608296

#11

想实现类似51job地区选择
下拉列表已实现

不明白position:absolute;会影响javascript执行

#12

引用 10 楼 saishangpeiqian 的回复:

一个城市选择能用这么多代码
去这里下载现成的demo
http://download.csdn.net/source/1608296

这个需要资源分这么多我晕不能少点吗？分数不多！！！

#13

根据省份查询所属的所有城市啊，实现DropDownList两级联动就可以实现了！！

#14

与数据库相连多好！

#15

引用 14 楼 zcw2009 的回复:

与数据库相连多好！

是调用的数据库，粘的代码是生成后页面源码，想让大家分析一下出现的问题

#16

引用 14 楼 zcw2009 的回复:

与数据库相连多好！

一个省市级联还和数据库相连多好好在哪里完全没必要最多数据库存一份纪录更新的时候重新读数据库生成JS 或者XML

#17

引用 10 楼 saishangpeiqian 的回复:

一个城市选择能用这么多代码
去这里下载现成的demo
http://download.csdn.net/source/1608296

效果很这个相似，数据是从数据库中取的

#1

你的代码太长了，这里你应该用ajax处理，选择一个省份时，后面的一个下拉就绑定对应这个省对应的城市

#2

引用 1 楼 hdhai9451 的回复:

你的代码太长了，这里你应该用ajax处理，选择一个省份时，后面的一个下拉就绑定对应这个省对应的城市

#3

function showspan(id)
{
var o = document.getElementById(id);
o.style.display="block";
}

#4

#5

我倒，楼主真是太牛了，一上来二话不说，直接帖上这么长的代码

#6

引用 1 楼 hdhai9451 的回复:

你的代码太长了，这里你应该用ajax处理，选择一个省份时，后面的一个下拉就绑定对应这个省对应的城市

同意！

#7

就根据选中省查询所有城市不就ok了吗

#8

找到问题了，但是很奇怪，样式表影响javascript的执行
如果去掉position:absolute;
就可以

#9

使用 ICallbackEventHandler 实现无刷新回调

#10

一个城市选择能用这么多代码
去这里下载现成的demo
http://download.csdn.net/source/1608296

#11

想实现类似51job地区选择
下拉列表已实现

不明白position:absolute;会影响javascript执行

#12

引用 10 楼 saishangpeiqian 的回复:

一个城市选择能用这么多代码
去这里下载现成的demo
http://download.csdn.net/source/1608296

这个需要资源分这么多我晕不能少点吗？分数不多！！！

#13

根据省份查询所属的所有城市啊，实现DropDownList两级联动就可以实现了！！

#14

与数据库相连多好！

#15

引用 14 楼 zcw2009 的回复:

与数据库相连多好！

是调用的数据库，粘的代码是生成后页面源码，想让大家分析一下出现的问题

#16

引用 14 楼 zcw2009 的回复:

与数据库相连多好！

一个省市级联还和数据库相连多好好在哪里完全没必要最多数据库存一份纪录更新的时候重新读数据库生成JS 或者XML

#17

引用 10 楼 saishangpeiqian 的回复:

一个城市选择能用这么多代码
去这里下载现成的demo
http://download.csdn.net/source/1608296

效果很这个相似，数据是从数据库中取的

秒客网

实现城市选择问题

17 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#13

#14

#15

#16

#17

相关文章