如何使用 jquery 在页面加载时生成动态下拉列表？

Question

您好，我有五个 html 屏幕，将根据页面下拉菜单中选择的角色导航到页面？

这是我用来生成下拉菜单的代码。

var roleByCatgory = {
            Education: ["Schools", "Colleges"],
            Operations: ["Director", "Controller"],
            Entertainment: ["Music", "dance"]

        }

        function cat(value) {
            if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
            else {
                var catOptions = "";
                catOptions += "<option disabled selected>--Select--</option>";
                for (categoryId in roleByCatgory[value]) {
                    catOptions += "<option>" + roleByCatgory[value][categoryId] + "</option>";
                }
                $("#category").html(catOptions);
                var dropdown_role = document.getElementById("category").value;

                $("#category").on('change', function () {

                    if ($("#category").val() == "Schools") {
                        location.href = "school.html";
                    }
                    else if ($("#category").val() == "Colleges") {
                        location.href = "Colleges.html";
                    }
                    else if ($("#category").val() == "Director") {
                        location.href = "Director.html";
                    }
                });
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-lg-4  col-lg-offset-2 col-xs-6">
        <!-- modification to be done for dropdown -->
        <select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);">
            <option value="--" selected>--Select--</option>
            <option value="Education" selected>Education</option>
            <option value="Operations">Operations</option>
            <option value="Entertainment">Entertainment</option>

        </select>

    </div>
    <div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12">
        <div class="form-group">
            <div class="input">
                <select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"></select>
            </div>
        </div>
    </div>

在页面加载时我无法获得第二个下拉值？在页面导航上，我应该能够显示两个下拉值的当前值。

Answer 1

@BhavaniSankar 是您想让两个下拉菜单都在屏幕上可见，您需要使用 iframe。

检查一下：

 var roleByCatgory = {
            Education: ["Schools", "Colleges"],
            Operations: ["Director", "Controller"],
            Entertainment: ["Music", "dance"]

        }

        $(document).ready(function () {
            cat($("#Maindropdown").val());
        });


        function cat(value) {
            if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
            else {
                var catOptions = "";
                catOptions += "<option disabled selected>--Select--</option>";
                for (categoryId in roleByCatgory[value]) {
                    catOptions += "<option>" + roleByCatgory[value][categoryId] + "</option>";
                }
                $("#category").html(catOptions);
                var dropdown_role = document.getElementById("category").value;

                $("#category").on('change', function () {

                    if ($("#category").val() == "Schools") {
                        $('#iFrame1').attr("src","school.html");
                    }
                    else if ($("#category").val() == "Colleges") {
                        $('#iFrame1').attr("src","Colleges.html");
                    }
                    else if ($("#category").val() == "Director") {
                        $('#iFrame1').attr("src", "Director.html");
                    }
                });
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-lg-4  col-lg-offset-2 col-xs-6">
        <!-- modification to be done for dropdown -->
        <select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);">
            <option value="--" selected>--Select--</option>
            <option value="Education" selected>Education</option>
            <option value="Operations">Operations</option>
            <option value="Entertainment">Entertainment</option>

        </select>

    </div>
    <div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12">
        <div class="form-group">
            <div class="input">
                <select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"></select>
            </div>
        </div>
    </div>

    <iframe id="iFrame1" height="100%" width="100%" style="min-height:300px;border:none"></iframe>

还有另一种解决方案，即使用 jquery ajax 请求加载 html 内容。

Answer 2

这里是使用“load()”函数的jQuery ajax方法

检查一下：

 var roleByCatgory = {
            Education: ["Schools", "Colleges"],
            Operations: ["Director", "Controller"],
            Entertainment: ["Music", "dance"]

        }

        $(document).ready(function () {
            cat($("#Maindropdown").val());
        });


        function cat(value) {
            if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
            else {
                var catOptions = "";
                catOptions += "<option disabled selected>--Select--</option>";
                for (categoryId in roleByCatgory[value]) {
                    catOptions += "<option>" + roleByCatgory[value][categoryId] + "</option>";
                }
                $("#category").html(catOptions);
                var dropdown_role = document.getElementById("category").value;

                $("#category").on('change', function () {

                    if ($("#category").val() == "Schools") {
                        $("#div1").load("school.html");
                    }
                    else if ($("#category").val() == "Colleges") {
                        $("#div1").load("Colleges.html");
                    }
                    else if ($("#category").val() == "Director") {
                        $("#div1").load("Director.html");
                    }
                });
            }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-lg-4  col-lg-offset-2 col-xs-6">
        <!-- modification to be done for dropdown -->
        <select name="Maindropdown" class="form-control dropdown " id="Maindropdown" onchange="cat(this.value);">
            <option value="--" selected>--Select--</option>
            <option value="Education">Education</option>
            <option value="Operations">Operations</option>
            <option value="Entertainment">Entertainment</option>

        </select>

    </div>
    <div class="col-md-4 col-lg-4 col-lg-offset-1 col-xs-12">
        <div class="form-group">
            <div class="input">
                <select name="category" class="form-control dropdown " style="border-radius: 1em;" id="category"></select>
            </div>
        </div>
    </div>

    <div id="div1" style="min-height:200px;width:100%;border:solid 1px #c6c6c6"></div>

现在，当您选择下拉列表时，内容正在加载到 div 标签内。