JavaScript中的三级联动

发布时间:2019年05月27日 阅读:76 次

三级联动演示

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="Copyright" content="爱JavaScript中文网 http://www.ijavascript.cn/" />

<meta name="description" content="三级联动,分享个人的JavaScript学习经历,做最好的JavaScript资料分享站点" />

<meta content="三级联动,爱JavaScript中文网" name="keywords" />

<title>三级联动演示 - 爱JavaScript中文网</title>

 

<SCRIPT LANGUAGE="JavaScript">

<!--

 

var t = new Array();

 

t["111"]="农业用品及食品";

t["111001"]="食品类";

t["111002"]="农业用品";

t["111001001"]="营养补给品";

image.png

 

 

var bit = 3;

var defaultVal = "122009036";

 

function setVal(objSel)

{

  var v = objSel.options[objSel.selectedIndex].value;

  var ov = document.getElementById('v');

  if(v == "")

  {

    if (ov != null)

    {

      v = ov.value;

      var d = objSel.getAttribute("d") != null ? objSel.getAttribute("d") : 0;

      v = v.substr(0, bit * (d - 1));

    }

  }

 

  if (ov != null)

    ov.value = v;  

 

}

 

function LoadData(objSelId, val, defaultVal)

{

  var i = 0, d=0;

  var c;

  var objSel = document.getElementById(objSelId);

  if (objSel == null)

    return;

  

  d = objSel.getAttribute("d") != null ? objSel.getAttribute("d") : 0;

  if(objSel.getAttribute("c") != null)

  {

    c = objSel.getAttribute("c");

  }

 

  var len = d * bit;

  objSel.options.length = 0;

  objSel.options.add(new Option( "Please select", ""));

 

 

  for (var k in t)

  {

    if (k.length == len && k.substr(0, len-bit) == val.substr(0, len-bit))

    {

      objSel.options.add(new Option( t[k], k));

      if (k == defaultVal.substr(0, len))

        i = objSel.options.length - 1;

    }

  }  

 image.png

  if (i > 0)

  {

    objSel.selectedIndex = i;

  }

 

  setVal(objSel);

 

  if (c != null)

    LoadData(c, defaultVal, defaultVal);

 

  if(c != null)

  {

    objSel.onchange = Function( "LoadData('"+c+"', this.options[this.selectedIndex].value, '');setVal(this);" );    

  }

  else

  {

    objSel.onchange = Function( "setVal(this);" );    

  }  

}

 

function Init()

{  

  LoadData("s1", "", defaultVal);

}

 

//-->

</SCRIPT>

 

</HEAD>

 

<BODY onload="Init();">

<select name="s1" id="s1" c="s2" d="1">

  <option></option>

</select>

<select name="s2" id="s2" c="s3" d="2">

  <option></option>

</select>

<select name="s3" id="s3" d="3">

  <option></option>

</select>

<input name="v" id="v"/>

</BODY>

</HTML>

以上的内容就是JavaScript中的三级联动的全部信息了。希望对你有帮助,如果还有什么不懂的欢迎到我们的js教练官网进行留言!

http://www.javascriptedu.com

Tag:JavaScript中的三级联动 JavaScript中的三级联动实例
相关文章

发表评论: