select两级联动，并且根据第二级select之option的value值输出到text

select两级联动
第一级select为省份，第二级select为城市。
第一级省份的select每个option没有value值。
第二级相关城市的select每个option都有一个value值。
选择第一级select的省份后第二级select显示第一级省份的相关城市。
选择第二级select的城市后它的option之value值输出到下面文本框的live_type值下面是代码，两个select没有联动，在现有的基础上改动一下，使省份和城市联动起来。谢谢！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联动</title>
<style type="text/css">
.mid{width:433px;padding:10px 0 20px 0;text-align:center;}
.mid p{font-size:14px;}
.mid .text{width:50px;}
.mid textarea{border:1px solid #cfd0d6;width:350px;height:95px;overflow:hidden;}
.mid .btn{height:25px;color:#6f6e6e;font-size:12px;font-weight:700;line-height:25px;border:1px solid #d0d0d0;background:url(/skin/btn_bg.gif) repeat-x 0 0;cursor:pointer}
</style>
<script language="JavaScript" type="text/javascript">
var sCode = '<scr'+'ipt type="text/javascript">\n'+
'var live_width = {w};\n'+
'var live_height = {h};\n'+
'var live_type = "{t}";\n'+
'</scr'+'ipt>\n'+
'<scr'+'ipt type="text/javascript" src="/api/api.js"></scr'+'ipt>';
function $(sId){
return document.getElementById(sId);
}
 function copyStr(str) {
  window.clipboardData.setData('text',str);
 }
function copyCode(){
copyStr($('c').value);
alert('复制成功');
}
function updateCode(){
var w = parseInt($('w').value);
var h = parseInt($('h').value);
var t = $('t').value;
if(isNaN(w) || isNaN(h)){
alert('请输入数字 :) ');
}else{
if(w<720 || h<600){
note(1);
}else{
note(0);
}
$('c').value = sCode.replace('{w}',w).replace('{h}',h).replace('{t}',t);
}
}
function note(n){
var c = n ? 'red' : '#000';
$('note').style.color= c;
}
</script>
</head>
<body>
<div class="mid">
<span id="note"></span>
<p>默认：
<select>
<option>江苏</option> 
<option>甘肃</option>
</select>
<select id="t" onchange="updateCode();">
<option value="1">南京</option> 
<option value="2">常熟</option>
<option value="3">泰州</option>
<option value="4">苏州</option>
</select>
&nbsp;宽度：<input class="text" id="w" value="760" onkeyup="updateCode();" size="10"/>
&nbsp;高度：<input class="text" id="h" value="460" onkeyup="updateCode();" size="10"/>
</p>
<p><textarea onfocus="this.select()" id="c"></textarea></p>
<p><input type="button" class="btn" value="复制代码" onclick="copyCode();"/></p>
<script type="text/javascript">updateCode();</script>
</div>
</body>
</html>

解决方案 »

  1.   

    1.加载jquery 
    2.city.js 代码如下
    http://download.csdn.net/detail/shenhuaxb258/4981593
    3. 页面调用 
    <select style="width:auto" id="Province" class="Province" name="Province">
    <option value="">--请选择省份--</option>
    </select>
    <select style="width:auto" id="City" class="City" name="City">
    <option value="">--请选择城市--</option>
    </select>
    <select style="width:auto" id="Area" class="Area" name="Area">
    <option value="">--请选择地区--</option>
    </select>
    <script type="text/javascript" language="JavaScript">new PCAS("Province","City","Area","","","")</script>
      

  2.   


    是啊 昨天那个不行我的意思就是让面的省份和城市关联  然后城市的option之value值输出到 TEXT中的live_type
      

  3.   

    我记得我回过你一次代码。看你这需要，那给你的代码应该是全部能实现的。http://bbs.csdn.net/topics/390342360?page=1#post-393432965<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>联动</title>
    <style type="text/css">
    .mid{width:433px;padding:10px 0 20px 0;text-align:center;}
    .mid p{font-size:14px;}
    .mid .text{width:50px;}
    .mid textarea{border:1px solid #cfd0d6;width:350px;height:95px;overflow:hidden;}
    .mid .btn{height:25px;color:#6f6e6e;font-size:12px;font-weight:700;line-height:25px;border:1px solid #d0d0d0;background:url(/skin/btn_bg.gif) repeat-x 0 0;cursor:pointer}
    </style>
    <script language="JavaScript" type="text/javascript">
    var sCode = '<scr'+'ipt type="text/javascript">\n'+
    'var live_width = {w};\n'+
    'var live_height = {h};\n'+
    'var live_type = "{t}";\n'+
    '</scr'+'ipt>\n'+
    '<scr'+'ipt type="text/javascript" src="/api/api.js"></scr'+'ipt>';
    function $(sId){
    return document.getElementById(sId);
    }
     function copyStr(str) {
      window.clipboardData.setData('text',str);
     }
    function copyCode(){
    copyStr($('c').value);
    alert('复制成功');
    }
    function updateCode(){
    var w = parseInt($('w').value);
    var h = parseInt($('h').value);
    var t = $('t').value;
    if(isNaN(w) || isNaN(h)){
    alert('请输入数字 :) ');
    }else{
    if(w<720 || h<600){
    note(1);
    }else{
    note(0);
    }
    $('c').value = sCode.replace('{w}',w).replace('{h}',h).replace('{t}',t);
    }
    }
    function note(n){
    var c = n ? 'red' : '#000';
    $('note').style.color= c;
    }
    </script>
    </head>
    <body>
    <div class="mid">
    <span id="note"></span>
    <p>默认：
    <select id="province">
    <option value='js'>江苏</option>
    <option value='gs'>甘肃</option>
    </select>
    <select id="t" onchange="updateCode();"></select>宽度：<input class="text" id="w" value="760" onkeyup="updateCode();" size="10"/> 
    高度：<input class="text" id="h" value="480" onkeyup="updateCode();" size="10"/>
    </p>
    <p><textarea onfocus="this.select()" id="c"></textarea></p>
    <p><input type="button" class="btn" value="复制代码" onclick="copyCode();"/></p>
    <script type="text/javascript">
    //updateCode();

    // 此处可以用json，我偷懒了,你自己动手。
    var cityArray = [getCityOptions('苏州','js_1'),getCityOptions('常熟','js_2'),
     getCityOptions('常州','js_3'),getCityOptions('南京','js_4'),
     getCityOptions('兰州','gs_1'),getCityOptions('武威','gs_2'),
     getCityOptions('金昌','gs_3'),getCityOptions('天水','gs_4')],
    province = document.getElementById("province"),
    city = document.getElementById("t"),
    textArea = document.getElementById("c"),
    proValue = "",
    len = cityArray.length,
    i,
    cityObj = null; province.onchange = function (e){
    proValue = this.value;
    filterOptions(proValue);
    } // 此处偷懒
    city.onchange = function (){
    textArea.value = city.options[0].value;
    } function filterOptions(pv){
    var j = 0;
    for(i = len - 1 ; i >= 0 ; i--){
    cityObj = cityArray[i];
    if(cityObj.value.indexOf(pv) > -1){
    city.options[j] = new Option(cityObj.text , cityObj.value);
    j++;
    }
    }
    } function getCityOptions(text,value){
    return {
    "text" : text,
    "value" : value
    };
    }</script>
    </div>
    </body>
    </html>