在下拉菜单中拉取 json 文件

Question

我试图在下拉列表中拉取 json 文件以显示可用尺码、颜色和衬衫图片。我的下拉菜单有效，但在我测试时它没有在我的 div 上显示任何内容。这是我到目前为止得到的。

p {
display: inline;
position: relative;
letter-spacing: 20px; /* This will push it together giving us a nice 3D vibe */
color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Shirts That you love</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script language="javascript" type="text/javascript">

        var JSON_Response;

        $(document).ready(function () {

            $.getJSON('man.json', function (data) {
                JSON_Response = data;  

               
                var mySelect = document.getElementById("selman");

                for (i = 0; i < JSON_Response.man.length; i++) {
                    var myOption = document.createElement("option");
                    myOption.text = JSON_Response.man[i].Shirt;
                    myOption.value = i;
                    try {

                        mySelect.add(myOption, mySelect.options[null]);
                    }
                    catch (e) {
                        mySelect.add(myOption, null);
                    }
                } 

            }); 

            $.getJSON('women.json', function (data) {
                JSON_Response = data;  
               

                http://www.w3schools.com/jsref/met_select_add.asp
                var mySelect = document.getElementById("selwoman");

                for (i = 0; i < JSON_Response.women.length; i++) {
                    var myOption = document.createElement("option");
                    myOption.text = JSON_Response.women[i].Shirt;
                    myOption.value = i;
                    try {

                        mySelect.add(myOption, mySelect.options[null]);
                    }
                    catch (e) {
                        mySelect.add(myOption, null);
                    }
                } 

            });

            $.getJSON('kids.json', function (data) {
                JSON_Response = data;

                
                var mySelect = document.getElementById("selkids");

                for (i = 0; i < JSON_Response.kids.length; i++) {
                    var myOption = document.createElement("option");
                    myOption.text = JSON_Response.kids[i].Shirt;
                    myOption.value = i;
                    try {

                        mySelect.add(myOption, mySelect.options[null]);
                    }
                    catch (e) {
                        mySelect.add(myOption, null);
                    }
                } 

            });

            $("#selman").change(function () {
                var myIndex = $("#selman").val();
                $("#shirts").attr("src", JSON_Response.man[myIndex].shirtimage);

                var info = JSON_Response.man[myIndex].Shirt + "<br />";
                info += JSON_Response.man[myIndex].Color + "<br />";
                info += JSON_Response.man[myIndex].Sizes + "<br />";
                info += "Man" + "<br />";

                $("#divDisplay").html(info);

            });

            $("#selwoman").change(function () {
                var myIndex = $("#selkids").val();
                $("#shirts0").attr("src", JSON_Response.women[myIndex].shirtimage);

                var info = JSON_Response.women[myIndex].Shirt + "<br />";
                info += JSON_Response.women[myIndex].Color + "<br />";
                info += JSON_Response.women[myIndex].Sizes + "<br />";
                info += "women" + "<br />";

                $("#divDisplay0").html(info);

            });

            $("#selkids").change(function () {
                var myIndex = $("#selwomen").val();
                $("#shirts1").attr("src", JSON_Response.kids[myIndex].shirtimage);

                var info = JSON_Response.kids[myIndex].Shirt + "<br />";
                info += JSON_Response.kids[myIndex].Color + "<br />";
                info += JSON_Response.kids[myIndex].Sizes + "<br />";
                info += "kids" + "<br />";

                $("#divDisplay1").html(info);

            });
        });

    </script>

</head>
<body>
    <h1>Pick A Genre</h1>

    <p>
        <br />
        Are you a man?
    </p>

    <table>
        <tr>
            <td rowspan="2">
                <img id="shirts" alt="" src="" /></td>
            <td>
                <select id="selman">
                    <option></option>

                </select></td>
        </tr>
        <tr>
            <td>
                <div id="divDisplay">
                </div>
            </td>
        </tr>

    </table>
    <p>
        <br />
        Are you a woman?
    </p>

    <table>
        <tr>
            <td rowspan="2">
                <img id="shirts0" alt="" src="" /></td>
            <td>
                <select id="selwoman">
                    <option></option>

                </select></td>
        </tr>
        <tr>
            <td>
                <div id="divDisplay0">
                </div>
            </td>
        </tr>

    </table>
    <p>
        <br />
        Are you a kid?
    </p>

    <table>
        <tr>
            <td rowspan="2">
                <img id="shirts1" alt="" src="" /></td>
            <td>
                <select id="selkids">
                    <option></option>

                </select></td>
        </tr>
        <tr>
            <td>
                <div id="divDisplay1">
                </div>
            </td>
        </tr>

    </table>
    <p>
        &nbsp;
    </p>
</body>
</html>

Answer 1

有两种可能的错误-

select中的选项插入试试这个-

mySelect.add(我的选项);
查看您的 JSONm，可能是您没有提取正确的信息..

在下拉菜单中拉取 json 文件

pull json file on dropdown

java

json

drop-down-menu

pull