HTML选择下拉框后，页面内容根据选择去变化

　

下拉框

有时候，我们需要去实现选择下拉选之后，页面上的内容根据选择的不同而进行不同的变化。我在这里需要实现的是下拉选选择的是公司，公司有客服人员，选择完公司之后，把客服人员的信息打印出来。

页面的内容代码如下：

<section>
    <form id="customerForm">
        <ul class="page-content">
            <li class="inputBox">
                <label for="customerId">公司名称：</label>
                <select class="customerIds"></select>
            </li>
            <li class="inputBox">
                <label for="customerName">联系人：</label>
                <input type="text"  class="text_add" id="customerName" />
            </li>
            <li class="inputBox">
                <label for="customerMobile">联系电话：</label>
                <input type="text"  class="text_add" id="customerMobile"/>
            </li>
            <li class="inputBox">
                <label for="customerAddress">联系地址：</label>
                <input type="text"  class="text_add" id="customerAddress"/>
            </li>
            <li class="inputBox">
                <label for="customerWeb">公司官网：</label>
                <input type="text"  class="text_add" id="customerWeb"/>
            </li>
        </ul>
        <p class="btnBox">
            <input type="button" class="btn btn-primary ok" οnclick="saveOrUpdate()" value="提交"/>
            <input type="button" class="btn btn-primary btn-warning cancel" value="返回"/>
        </p>
        <input type="text" style="display: none;" id="customerId" value="0">
    </form>
</section>

交互我们使用的是ajax异步请求去加载数据，数据格式为json

页面的ajax代码如下：

$(function () {
        $.ajax({
            type: "get",
            url: "/test/initData",
            contentType: "APPlication/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if(data.statusCode==100) {
                    var options = "<option>--请选择公司--</option>";
                    for (var i = 0; i < data.data.length; i++) {
                        options+="<option>"+data.data[i].companyName+"</option>";
                    }
                    $(".customerIds").html(options);
                    //活动名称下拉选改变事件：
                    $(".customerIds").change(function () {
                        $(this).removeClass("redFrame");
                        console.log("活动名称下拉选改变事件："+$(this).children('option:selected').val());
                        console.log("选择的具体是哪一个："+$(this).get(0).selectedindex);
                        var selectedIndex = $(this).get(0).selectedIndex;
                        if(selectedIndex==0){
                            console.log("没有进行选择");
                            $("#customerName").val("");
                            $("#customerMobile").val("");
                            $("#customerAddress").val("");
                            $("#customerWeb").val("");
                        }
                        else{
                            $("#customerName").val(data.data[selectedIndex-1].customer.customerName);
                            $("#customerMobile").val(data.data[selectedIndex-1].customer.customerMobile);
                            $("#customerAddress").val(data.data[selectedIndex-1].customer.customerAddress);
                            $("#customerWeb").val(data.data[selectedIndex-1].customer.customerWeb);
                        }
                    });
                }
                else{
                    console.log("获取数据失败");
                }
            },
            ERROR:function (XMLHttprequest, textStatus, errorthrown) {
                alert(XMLHttpRequest.status);
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
            }
        });
    });

以上，我们在页面加载的时候去请求数据，返回数据之后，设置下拉选的change事件，来对应的改变下面表单当中的内容，并且当选择的内容不是公司的名称的时候，把下面表单当中的内容全部设置为空。

相关阅读

淘宝登录页面背景图素材去哪里找？页面设置有什么要求？

淘宝店铺的装修是非常重要的，每一个页面，每一个细节都不容忽视，合理的图片素材和色彩的搭配，能让店铺看起来更加亲切，更加吸睛。我们前

模拟登入页面

今天我们学习了模拟一个登入页面。首先：打开SQL，创建一个表tb_user,具体参数如下：接着：创建几个包，包里创建几个文件，截图如下Music、DB

唐世军：SEO总监，为什么也选择A5的SEO诊断服务？

至今，我们做SEO诊断，已经超过四年。我们是从2010年下半年开始提供专业性的SEO诊断服务，在国内应该是第一家公司专业提供SEO诊断服务

淘宝订单页面不显示保单是因为什么？该怎么办呢？

现在的人们已经离不开了淘宝，但是人们对淘宝的了解却没有跟上它的发展节奏，每天都会遇到各种问题可以说，尤其是在订单险、运费险这一

新手淘宝卖家如何选择快递物流

seo实验室宝店，物流是很关键的。物流的安全，速度的快慢是买家注重的，也是卖家要特别注意的。那么作为新手淘宝卖家怎么去选择快递物