如何实现下拉框联动？

JavaScript018

如何实现下拉框联动？,第1张

网页下拉框联动，即第一个下拉框内容改变，则与之联动的另一个下拉框的内容也随之改变。这个功能javascript（以下简称js）或者jsp都可以实现，不过根据笔者经验，除非万不得已，能够利用js实现的话就尽量不要使用jsp，因为js是静态语言，执行不需要和服务器联系 ，不论在速度上还是稳定性上都有很大的优越性。

下拉框的条目内容如果是事先确定的并且数量较少，那么可以事先定义两个数组，将下拉框的条目内容存进去，为了实现上的方便，可以利用下标对照进行存储，当然，也可以用别的方法，只要可以做到第一级下拉框和二级的条目对应起来就行了。

以下标对照存储为例

比方说第一级下拉框的内容为A,B,C当选定A时，二级下拉框内容为11，22，33，选定B时，二级下拉框内容为44，55，66，选定C时，二级下拉框内容为77，88，99；这样的话定义的两个数组为：

var quanbu1 = new Array(A,A,A,B,B,B,C,C,C)

var quanbu2 = new Array(11,22,33,44,55,66,77,88,99)

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

<form aciton="../php/register.php" method="post">

        <p>

            <label style="color: #ffffffwidth: 40%text-align: right">所&nbsp&nbsp在&nbsp&nbsp省:</label>

            <select style="width:75%" id="s_province" name="s_province" onchange="setVal1(this.options[this.selectedIndex].text)"></select>

        </p>

        <p>

            <label style="color: #ffffffwidth: 40%text-align: right">所&nbsp&nbsp在&nbsp&nbsp市:</label>

            <select style="width:75%" id="s_city" name="s_city" onchange="setVal2(this.options[this.selectedIndex].text)"></select>

        </p>

        <p>

            <label style="color: #ffffffwidth: 40%text-align: right">所&nbsp&nbsp在&nbsp&nbsp县:</label>

            <select style="width:75%" id="s_county" name="s_county" onchange="setVal3(this.options[this.selectedIndex].text)"></select>

        </p>

            <input type="hidden" id="shengText" value=""  name="shengText"/>

            <input type="hidden" id="xianText" value=""  name="xianText"/>

            <input type="hidden" id="shiText" value=""  name="shiText"/>

            <script class="resources library" src="http://sandbox.runjs.cn/uploads/rs/267/g3ugugjp/area.js" type="text/javascript"></script>

            <script type="text/javascript">_init_area()</script>

        <p><button type="submit" class="button1">注 册</button>

        </p>

    </form>

</div>

</body>

<script type="text/javascript">

    var Gid  = document.getElementById 

    var showArea = function(){

        Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" +

        Gid('s_city').value + " - 县/区" +

        Gid('s_county').value + "</h3>"

    }

    Gid('s_county').setAttribute('onchange','showArea()')

</script>

<script  language="javascript">

    function setVal1(_text)

    {

        document.getElementById("shengText").value=_text

    }

    function setVal2(_text)

    {

        document.getElementById("shiText").value=_text

    }

    function setVal3(_text)

    {

        document.getElementById("xianText").value=_text

    }

</script>

这样我是能获取到值， 但是只获取到最后一个 县的那个 select值。  试了半个小时。发现是js文件为select赋值的原因。 有没有什么其他办法。 既可以用js文件为select赋值，还能获取到值为文本框赋值。