select二级联动

最新推荐文章于 2023-03-15 11:42:35 发布

恋念思尔悄悄然

最新推荐文章于 2023-03-15 11:42:35 发布

阅读量485

点赞数

分类专栏：我的前端啦

本文链接：https://blog.csdn.net/sdiudui/article/details/80746727

版权

我的前端啦专栏收录该内容

15 篇文章 0 订阅

订阅专栏

经常遇到select二级联动的项目.写个demo

html：

<form class="form-inline" role="form">
    <select id="TaskCycleType" οnchange="ChangeExampleSelect(this.selectedIndex)" class="form-control" style="cursor: pointer;">
        <option value="平台">平台</option>
	<option value="游戏">游戏</option>
    </select>
    <select id="TaskCycle" class="form-control" style="cursor: pointer;">
	<option value="7日数据">7日数据</option>
	<option value="30日数据">30日数据</option>
    </select>
</form>

js：

//这个请选择选项加的很好。
var jiaArr = ["平台", "游戏"];
var exampleArr = [
    ["7日数据", "30日数据"],
    ["7日数据", "30日数据"]
];
window.onload = function(){
    var selJia = document.getElementById("TaskCycleType");
    //申请空间
    selJia.length = jiaArr.length;
    //添加元素
    for(var i=0;i<jiaArr.length;i++){
        selJia.options[i].text = jiaArr[i];
	selJia.options[i].value = jiaArr[i];
    }
}

function ChangeExampleSelect(index){
    var selExa = document.getElementById("TaskCycle");
    selExa.length = exampleArr[index].length;
    for(var i=0;i<exampleArr[index].length;i++){
        selExa.options[i].text = exampleArr[index][i];
        selExa.options[i].value = exampleArr[index][i];
    }
}