Question

抱歉，因为我问了一个愚蠢的问题。但我缺乏对此的了解。有人可以帮助我。

我的“大男孩”要求我只用HTML做网站（不是USE DATABASE），但他要我让产品页面显示产品。（产品不多）

我有2个输入可供选择。 1.产品风格 2.产品清单（取决于产品款式） =＆GT;当我们选择样式时，产品列表将列为条件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SelectBoxOptions</title>

<script type="text/javascript">

    var  arrayStyle = ["AAAAAAAAAA","BBBBBBBBBB","CCCCCCCCCC","DDDDDDDDDD","EEEEEEEEEE"];
    var  arrayProduct_0 = ["No Data"];
    var  arrayProduct_1 = ["1111111111","1222222222","1333333333","1444444444"];
    var  arrayProduct_2 = ["2111111111","2222222222","2333333333","2444444444"];
    var  arrayProduct_3 = ["3111111111","3222222222","3333333333","3444444444"];
    var  arrayProduct_4 = ["4111111111","4222222222","4333333333","4444444444"];

    window.onload = function createElement()
    {
        var style = document.getElementById("pro_style");

        for (var i = 0; i < arrayStyle.length; i++)
        {
            var option = document.createElement("option");
            option.setAttribute("value",[i]);
            option.text = arrayStyle[i];
            style.appendChild(option);
        }
    }

    function changeProbyStyle(id)
    {
        var aaa = id;
        //alert(aaa);
        switch (id)
        {
        case "0":
            //alert("So 0");
            return setPro(arrayProduct_0);
            break;
        case "1":
            //alert("So 1");
            return setPro(arrayProduct_1);
            break;
        case "2":
            //alert("So 2");
            return setPro(arrayProduct_2);
            break;
        case "3":
            //alert("So 3");
            return setPro(arrayProduct_3);
            break;
        case "4":
            //alert("So 4");
            return setPro(arrayProduct_4);
            break;
        }
    }

    function setPro(arr)
    {
        bbb=arr;
        //alert(bbb);
        var name = document.getElementById("pro_name");

        for (var i = 0; i < arr.length; i++)
        {
            var option = document.createElement("option");
            option.setAttribute("value",[i]);
            option.text = arr[i];
            name.appendChild(option);
        }

    }

</script>

</head>

<body>
    <form class="wrapper-dropdown">
        <h2>Product Style</h2>
            <select id="pro_style" onChange="changeProbyStyle(this.value);">
            </select>
        <h2>Product Name</h2>
            <select id="pro_name">
            </select>
    </form>
</body>
</html>

对于这个例子。当我选择List 1 = "BBBBBBBBBB"时，列表2将为["1111111111","1222222222","1333333333","1444444444"] => 4 products

我选择List 1 AGAIN = CCCCCCCCCC。列表2将是["1111111111","1333333333","2111111111","2222222222","2333333333","2444444444"]; => 6 products

我不希望它......我希望它只是选择列表1的4个产品。任何人都可以帮我解决这个问题。

感谢所有人。

解谢谢你给我的建议。我发现并尝试了很多，但我没有得到它。现在一切都好。对此的解决方案是添加do这样的函数，以便通过选择器的“loop for”来删除。

function removeOptions(selectbox)
{
    var i;
    for(i=selectbox.options.length-1;i>=0;i--)
    {
        selectbox.remove(i);
    }
}
//using the function:

removeOptions(document.getElementById("pro_name"));

我完成的代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SelectBoxOptions</title>

<script type="text/javascript">

    var  arrayStyle = ["AAAAAAAAAA","BBBBBBBBBB","CCCCCCCCCC","DDDDDDDDDD","EEEEEEEEEE"];
    var  arrayProduct_0 = ["No Data"];
    var  arrayProduct_1 = ["1111111111","1222222222","1333333333","1444444444"];
    var  arrayProduct_2 = ["2111111111","2222222222","2333333333","2444444444"];
    var  arrayProduct_3 = ["3111111111","3222222222","3333333333","3444444444"];
    var  arrayProduct_4 = ["4111111111","4222222222","4333333333","4444444444"];

    window.onload = function createElement()
    {
        var style = document.getElementById("pro_style");

        for (var i = 0; i < arrayStyle.length; i++)
        {
            var option = document.createElement("option");
            option.setAttribute("value",[i]);
            option.text = arrayStyle[i];
            style.appendChild(option);
        }
    }

    function changeProbyStyle(id)
    {
        var aaa = id;
        //alert(aaa);
        switch (id)
        {
        case "0":
            //alert("So 0");
            return setPro(arrayProduct_0);
            break;
        case "1":
            //alert("So 1");
            return setPro(arrayProduct_1);
            break;
        case "2":
            //alert("So 2");
            return setPro(arrayProduct_2);
            break;
        case "3":
            //alert("So 3");
            return setPro(arrayProduct_3);
            break;
        case "4":
            //alert("So 4");
            return setPro(arrayProduct_4);
            break;
        }
    }

    function setPro(arr)
    {
        function removeOptions(selectbox)
        {
            var i;
            for(i=selectbox.options.length-1;i>=0;i--)
            {
                selectbox.remove(i);
            }
        }
        //using the function:
        removeOptions(document.getElementById("pro_name"));

        bbb=arr;
        //alert(bbb);
        var name = document.getElementById("pro_name");

        for (var i = 0; i < arr.length; i++)
        {
            var option = document.createElement("option");
            option.setAttribute("value",[i]);
            option.text = arr[i];
            name.appendChild(option);
        }

    }

</script>

</head>

<body>
    <form class="wrapper-dropdown">
        <h2>Product Style</h2>
            <select id="pro_style" onChange="changeProbyStyle(this.value);">
            </select>
        <h2>Product Name</h2>
            <select id="pro_name">
            </select>
    </form>
</body>
</html>

我已经为文档编辑了这个条目。希望我的愚蠢问题能有所帮助......

如何使用Array通过另一个Dropdownlist显示Dropdownlist

0 个答案: