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标签中。

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

2 个答案: