select二级联动 同时第二级select关联textarea里的内容

下面的代码两个select现在没有联动起来，求高手在现有代码的基础上改动一下使两个select联动，并且第二个select的value关联到textarea  谢谢了。<!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>
<select id="t" onchange="updateCode();">
<option value="5">兰州</option>
<option value="6">武威</option>
<option value="7">金昌</option>
<option value="8">天水</option>
</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();</script>
</div>
</body>
</html>

解决方案 »

  1.   

    你改一下 var data=[.....]的部分;，你的生成部分我也帮你改动一下<!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_type1 = "{t1}";\n'+
                'var live_type2 = "{t2}";\n'+
                'var live_type3 = "{t3}";\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 o={
        w :w,h : h,
        t1 : $( 'sel1' ).value+',',
        t2 : $( 'sel2' ).value+',',
        t3 : $( 'sel3' ).value+','
      }
     
      if ( isNaN( w ) || isNaN( h ) ) {
          alert( '请输入数字 :) ' );    } else {
          if ( w<720 || h<600 ) {
              note( 1 );
            } else {
              note( 0 );
            }
          $( 'c' ).value = sCode.replace(/\{(\w+)\}/g,function(_,k){return o[k]});   
     
        }
    }function note( n ) {
      var c = n ? 'red' : '#000';
      $( 'note' ).style.color= c;
    }
    var data=[
        {text:'a',value:1,
          cs:[
          {text:'aa',value:11,
            cs:[
              {text:'aaa',value:11},
              {text:'aab',value:112}
            ]
          },
          {text:'ab',value:12,
            cs:[
              {text:'aba',value:11},
              {text:'abb',value:112}
            ]
          }
          ]
        },
        {text:'b',value:2,
          cs:[
          {text:'ba',value:21,
            cs:[
              {text:'baa',value:21},
              {text:'bab',value:212}
            ]
          },
          {text:'bb',value:12,
            cs:[
              {text:'bba',value:11},
              {text:'bbb',value:112}
            ]
          }
          ]
          
        }
      ];
      function fireEvent(element,event){
        if (document.createEventObject){
            var evt = document.createEventObject();
            return element.fireEvent('on'+event,evt)
        }
        else{
            var evt = document.createEvent( 'HTMLEvents' );
            evt.initEvent(event, true, true);
            return !element.dispatchEvent(evt);
        }
       };
      
      function addOpt(el,ds){
         el.options.length=0;
        for(var i=0; i<ds.length;i++){
         el.options.add( new Option(ds[i].text , ds[i].value ) )   
        }
        el.selectedIndex=0;
        el.data=ds;
        fireEvent(el,'change');
      }
      function onChangeFn(el){
         var cs=el.data[el.selectedIndex].cs,
            i=+el.id.slice(-1)+1;
         if(i<4) addOpt($('sel'+i),cs);
         
          updateCode();
      }
      window.onload=function(){
        
        addOpt($('sel1'),data );
       
      }</script>
    </head>
    <body>
    <div class="mid">
    <span id="note"></span>
    <p>默认：
    <select id="sel1" onchange="onChangeFn(this)">
    </select>
    <select id="sel2" onchange="onChangeFn(this)">
    </select>
    <select  id="sel3"  onchange="onChangeFn(this)">
    </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">
      
      </script>
    </div>
    </body>
    </html>
      

  2.   

    你没有讲明白，第二select级联是指哪个？全是江苏地市的还是全是甘肃地市的？还是两者？此处我当你的第二个select当成是这两个省的所有地市，然后省级select和地市select级联。所以HTML我稍改了一下。效果请运行以下代码，希望对你有所帮助。
    <!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>
      

  3.   

    你好，感谢啊，你修改的已经比较接近我的意思了 能再帮我改一下吗？
    我的意思是：只有两个select 第一个select是省份，它的option没有value。第二个是城市，根据第一个select的内容来显示相关城市，只有第二个select的option有value值，并且这个value值要输出到textarea那些要复制的码中的live_type 。
      

  4.   

    按你要求改了updateCode生成部分<!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 o={
        w :w,h : h,
        t : $( 'sel2' ).value,
      }
     
      if ( isNaN( w ) || isNaN( h ) ) {
          alert( '请输入数字 :) ' );
        } else {
          if ( w<720 || h<600 ) {
              note( 1 );
            } else {
              note( 0 );
            }
          $( 'c' ).value = sCode.replace(/\{(\w+)\}/g,function(_,k){return o[k]});   
        }
    }function note( n ) {
      var c = n ? 'red' : '#000';
      $( 'note' ).style.color= c;
    }
    var data=[
        {text:'a',value:1,
          cs:[
          {text:'aa',value:11,
            cs:[
              {text:'aaa',value:11},
              {text:'aab',value:112}
            ]
          },
          {text:'ab',value:12,
            cs:[
              {text:'aba',value:11},
              {text:'abb',value:112}
            ]
          }
          ]
        },
        {text:'b',value:2,
          cs:[
          {text:'ba',value:21,
            cs:[
              {text:'baa',value:21},
              {text:'bab',value:212}
            ]
          },
          {text:'bb',value:12,
            cs:[
              {text:'bba',value:11},
              {text:'bbb',value:112}
            ]
          }
          ]
          
        }
      ];
      function fireEvent(element,event){
        if (document.createEventObject){
            var evt = document.createEventObject();
            return element.fireEvent('on'+event,evt)
        }
        else{
            var evt = document.createEvent( 'HTMLEvents' );
            evt.initEvent(event, true, true);
            return !element.dispatchEvent(evt);
        }
       };
      
      function addOpt(el,ds){
         el.options.length=0;
        for(var i=0; i<ds.length;i++){
         el.options.add( new Option(ds[i].text , ds[i].value ) )   
        }
        el.selectedIndex=0;
        el.data=ds;
        fireEvent(el,'change');
      }
      function onChangeFn(el){
         var cs=el.data[el.selectedIndex].cs,
            i=+el.id.slice(-1)+1;
         if(i<4) addOpt($('sel'+i),cs);
          updateCode();
      }
      window.onload=function(){
        addOpt($('sel1'),data );
      }</script>
    </head>
    <body>
    <div class="mid">
    <span id="note"></span>
    <p>默认：
    <select id="sel1" onchange="onChangeFn(this)">
    </select>
    <select id="sel2" onchange="onChangeFn(this)">
    </select>
    <select  id="sel3"  onchange="onChangeFn(this)">
    </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">
      
      </script>
    </div>
    </body>
    </html>