程序博客网 > mysql 日志文件

javascrip实现下拉框联动

来源：互联网发布：mysql 日志文件编辑：程序博客网时间：2024/04/30 21:12

实际项目中几个下拉框需要联动是经常需要实现的功能.
一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动.
不妨定义几个js的数据对象来描叙这种几个下拉框数据间的关系.这样数据关系明了,实现也简单.
见以下用javascript实现下拉框联动的实例

<script>
var itemAry1=new Array();
var itemAry2=new Array();
//定义第一个下拉框的数据结构
function Item(name,value)
{
  this.name=name;
  this.value=value;
}
//定义第二个下拉框的数据结构多了一个指向父项的数据
function SubItem(parent,name,value)
{
  this.parent=parent;
  this.name=name;
  this.value=value;
}

//组织下拉框的数据
itemAry1[0]=new Item(1,'item1');
itemAry1[1]=new Item(2,'item2');

itemAry2[0]=new SubItem(1,"1","subItem1");
itemAry2[1]=new SubItem(1,"2","subItem2");
itemAry2[2]=new SubItem(1,"3","subItem3");
itemAry2[3]=new SubItem(2,"4","subItemA");
itemAry2[4]=new SubItem(2,"5","subItemB");

//初始化第一个下拉框数据
function initOption()
{
  for(var i=0;i<itemAry1.length;i++)
  {
   document.getElementById("selectItem1").add(new Option(itemAry1[i].value,itemAry1[i].name));
  }
  changeOption(document.getElementById("selectItem1").value);
}

//联动第二个下拉框的数据
function changeOption(selectOpt)
{
document.getElementById("selectItem2").length=0;
for(var j=0;j<itemAry2.length;j++)
{
  if(itemAry2[j].parent==selectOpt)
  {
   document.getElementById("selectItem2").add(new Option(itemAry2[j].value,itemAry2[j].name));
  }
}
}
</script>
<html>
<body onload=initOption()>
<select id="selectItem1" name="selectItem1" onchange=changeOption(this.value)>
</select>
<select id="selectItem2" name="selectItem2"></select>
</body>
</html>

mysql 日志文件

mysql 日志文件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子射干麻黄汤方歌射干价格含沙射影射影定理含沙射影什么意思含沙射影意思射影定理公式射影射影定律高中射影定理公式自备纸巾必射影频直角三角形射影定理含沙射影的故事太古帝神射影含沙射影的意思射手射手女射手男射手性格幽灵射手射手男生意甲射手榜射手女生黑岩射手豌豆射手射手铭文射手图片射手坐射手女性格射手和射手射手男性格巨蟹和射手射手对射手射手和巨蟹射手配射手射手男射手女水瓶射手射手天秤天秤射手伪射手怪物射手