联动下拉框

联动下拉框是通过第一个下拉框的选择来决定第二个下拉框的值，这就称为联动下拉框，联动下拉框可以是多级联动，由第一个决定第二个，由第二个来决定第三个，这样的层层联动可以构造出多级联动的下拉框，那么既然已经知道了思路，那么制作起来肯定也是非常简单的，具体看以下案例：

首先看下要实现的效果：

实现的效果是，选择第一个出现第二个，选择第二个出现第三个，那么实现代码如下：

Css样式：

.cont {

        width: 500px;

        height: 268px;

        margin-left: 200px;

        display: inline-block;

    }

.ass {

        width: 120px;

        height: 82.5px;

        border: 1px solid #000;

        display: inline-block;

        position: relative;

        left: 44.5px;

        text-align: center;

        display: none;

    }

.ass2 {

        width: 100px;

        border: 1px solid #000;

        position: absolute;

        top: 104px;

        left: 374px;

        text-align: center;

        display: none;

    }

.ass3 {

        width: 100px;

        border: 1px solid #000;

        position: absolute;

        top: 104px;

        left: 474px;

        text-align: center;

        display: none;

    }

.inputs {

        margin-left: 30px;

        width: 165px;

        height: 30px;

        border-radius: 5px;

        border: 1px solid #0094ff;

        position:relative;

    }

Html代码：

@联动@

<div class="cont" id="cont">

    <h3>（1）联动下拉框</h3>

    <div>

        <input class="inputs" placeholder="—点击弹出搜索下拉框—" onclick="ADD()"  id="inputs"/>

    </div>

    <div>

        @*选择1*@

        <div class="ass" id="ASS">

            <ul id="ul"></ul>

        </div>

        @*选择2*@

        <div class="ass2" id="ASS2">

            <ul id="u2"></ul>

        </div>

        @*选择2*@

        <div class="ass3" id="ASS3">

            <ul id="u3">

                <li>

            </ul>

        </div>

    </div>

Javascript代码：

//input鼠标点击事件

    function ADD() {

        //绑定Grandpa

        $.get("/Text/selectGrandpa", function (data) {

            $.each(data, function (i) {

                $("#ul").append('<li index ="' + data[i].id + '" onmouseover=" fun(' + data[i].id + ',\'' + data[i].Name + '\')">' + data[i].Name + '</li>');



            });

            $("#ASS").css("display", "block");

        });

    }



    function fun(id, Name) {

        $("#inputs").val(Name.trim());

        //绑定father

        $.get("/Text/selectfather", { ID: id }, function (data) {

            $("#u2").empty();

            $.each(data, function (i) {

                $("#u2").append('<li index ="' + data[i].id + '" onmouseover=" funtow(' + data[i].id + ',\'' + data[i].Name + '\')">' + data[i].Name + '</li>');



            });

            $("#ASS2").css("display", "block");

        });

    }

    function funtow(id, Name) {

        var att = $("#inputs").val().substring(0, 5);

        att += "-"+Name;

        $("#inputs").val(att.trim());

        //绑定child

        $.get("/Text/selectchild", { ID: id }, function (data) {

            $("#u3").empty();

            $.each(data, function (i) {

                $("#u3").append('<li index ="' + data[i].id + '" onmouseover=" funsan(' + data[i].id + ',\'' + data[i].Name + '\')">' + data[i].Name + '</li>');

            });

            $("#ASS3").css("display", "block");

        });

    }

    function funsan(id,Name) {

        var ttn = $("#inputs").val().substring(0, 10)

        ttn += "-" + Name;

        $("#inputs").val(ttn.trim());

    }

那么以上代码实现的效果就是和文章开头展示的效果一样。