js实现两个下拉框联动

JavaScript038

js实现两个下拉框联动,第1张

基本方式有以下两种：方式1：给出菜单1的菜单数据，当点击某个菜单项后，把该项的值传给服务端，由服务端返回新的菜单数据到菜单2.方式2：菜单数据静态存储在js或者html元素中，当点击某个菜单项后，直接把相应的菜单数据到菜单2. 源代码你可以在百度搜索 "js下拉菜单 联动" 得到。

<select id="" onchange="show_input(this.value)">

<option value="0">test</option>

<option value="1">test1</option>

<option value="2">test2</option>

</select>

<input type="input" value="输入框" id="my_input"/>

</body>

<script type="text/javascript">

function show_input(test_value){

    if(test_value==0){

        document.getElementById("my_input").style.display="block"

    }else{

        document.getElementById("my_input").style.display="none"

    }

}

</script>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8" />

<title>JS</title>

<STYLE>

</STYLE>

<script type="text/javascript">

window.onload = function ()

    {

var sels = document.getElementsByTagName('select')

sels[0].onchange = function ()

    {

for ( var i = 1 i < sels.length i++)

    {

    sels[i].value = this.value

    }

    }

    }

</script>

</head>

<body>

<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<select>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

</body>

</html>