根据先前的选项选择动态更改选择框选项答案

【问题标题】：Dynamically change selectbox options based on previous option selection根据先前的选项选择动态更改选择框选项
【发布时间】：2012-09-18 07:22:53
【问题描述】：

我想要完成的是以下... HTML

<!doctype html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link href="css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
</head>
<body>



    <select name="dateselector_parent" id="dateselector_parent" tabindex="1">
        <option value="">--Select Date--</option>
        <option value="1">2012</option>
        <option value="1">2011</option>
        <option value="1">2010</option>
        <option value="2">Predefined Dates</option>
    </select>

    <select name="dateselector_child" id="dateselector_child" tabindex="2">
        <option value="">--Select Date--</option>
        <option value="1">January</option>
        <option value="1">February</option>
        <option value="1">March</option>
        <option value="1">April</option>
        <option value="1">May</option>
        <option value="1">June</option>
        <option value="1">July</option>
        <option value="1">August</option>
        <option value="1">September</option>
        <option value="1">October</option>
        <option value="1">November</option>
        <option value="1">December</option>
        <option value="2">Current Month</option>
        <option value="2">Month to Date</option>
        <option value="2">Last 7 Days</option>
    </select>


    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.selectbox-0.2.js"></script>
    <script type="text/javascript" src="js/datejs.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#dateselector_parent").selectbox();
        $("#dateselector_child").selectbox();
    });


    </script>
</body>

这会创建两个选择框，我希望一个框根据用户在另一个框上的选择来显示内容。例如，如果用户选择 2010 或 2011 或 2012，我想在第二个选项中显示 Jan-Dec 作为选项。如果用户选择预定义日期，我想显示当前月份、本月至今和过去 7 天。我使用的 javascript 插件允许用户定义 onChange、onOpen 和 onClose 方法。我一直在做一些研究，似乎 AJAX 参与了尝试来实现这一点，但由于我对 PHP 一点都不了解，我想知道是否可以使用 jQuery 来实现这一点。（当然，我试图解决这个问题但没有运气，我不是在找人为我做，我只是想指出正确的方向，我是否可以用 jQuery 完成这个，或者是否有必要使用AJAX，因为我还没有看到只有 jQuery 的在线示例）。

任何帮助将不胜感激

【问题讨论】：

我建议您使用两个子下拉菜单并根据父下拉菜单的选择显示/隐藏。如果您根据选择删除选项（正如您正在尝试的那样），可能会导致服务器端出现安全问题。
嗯，这当然是我没有想到的...所以第二个下拉菜单在用户选择日期（2010、2011 或 2012）之前不可见，将“显示”1 月至 12 月选择框，另一个将“显示”预定义的日期（并且 Jan-Dec 将保持隐藏）。你是这个意思吗？非常好的输入...谢谢:)
嗨，Kaf，我在创建显示/隐藏脚本时遇到了一点问题，你能帮我一下吗？我创建了一个包含选择框的 div（现在我有三个，其中 2 个包含在自己的 div 中），我试图在页面加载时使用 .hide() 隐藏它们，但我没有得到任何事物。任何帮助表示赞赏。谢谢
我仍然无法弄清楚，如果有任何额外的帮助，我们将不胜感激。

标签： javascript jquery html ajax

【解决方案1】：

我希望以下工作能满足您的要求。有 3 个子下拉菜单（无 div） 1. --Select--, 2. Jan-Dec 3.Other options

$().ready(function () {

    var selectedOnLoad = $('#dateselector_parent').val();
    setChild(selectedOnLoad);

    $('#dateselector_parent').change(function () {
       var selectedValue = $('#dateselector_parent').val();
       setChild(selectedValue);
    });

});

function setChild(value){
    //Have your three child selector names as follows in your markup as well and assuming they are not in divs
    var arr = [ "dateselector_child_", "dateselector_child_1", "dateselector_child_2"];

    jQuery.each(arr, function() {
            if(this == "dateselector_child_" + value){
                $("#" + this).show();
            }else{
                $("#" + this).hide();
            }
     });
}

更新：为上述脚本添加标记

<select name="dateselector_parent" id="dateselector_parent" tabindex="1">
    <option value="">--Select Date--</option>
    <option value="1">2012</option>
    <option value="1">2011</option>
    <option value="1">2010</option>
    <option value="2">Predefined Dates</option>
</select>


<select name="dateselector_child_" id="dateselector_child_" tabindex="2">
    <option value="">--Select Date--</option>
</select>

<select name="dateselector_child_1" id="dateselector_child_1" tabindex="2">
    <option value="">--Select Date--</option>
    <option value="1">January</option>
    <option value="1">February</option>
    <option value="1">March</option>
    <option value="1">April</option>
    <option value="1">May</option>
    <option value="1">June</option>
    <option value="1">July</option>
    <option value="1">August</option>
    <option value="1">September</option>
    <option value="1">October</option>
    <option value="1">November</option>
    <option value="1">December</option>
</select>

<select name="dateselector_child_2" id="dateselector_child_2" tabindex="2">
    <option value="">--Select Date--</option>
    <option value="2">Current Month</option>
    <option value="2">Month to Date</option>
    <option value="2">Last 7 Days</option>
</select>

检查 setChild(value) 函数。当页面准备好（加载后）以及用户更改选择时，父选择的值将传递给该函数。父母选择的值可以是“”、“1”、“2”。接下来，foreach 循环找到需要显示的孩子的名字，而其他的则被隐藏。如果用户选择父项的 ---Select--- 选项，则该函数将显示“dateselector_child_”，其他两个隐藏。

希望现在很清楚......

【讨论】：

这绝对是我想要的，因此我将其标记为答案，您不必再帮助我，只要您愿意。发生的事情是显示 3 个选择框，一旦我从第一个子组（2012,2011,2010）中选择另一个选择框（第 4 个），选择（预定义日期）时会发生同样的事情，前一个消失但另一个出现（带有正确的信息）。我究竟做错了什么？另外，你有3个孩子，我们不是只需要1个父母和2个孩子吗？（1 个孩子持有 Jan-Dec 和其他价值观）。谢谢！
所以问题似乎是在页面加载时它没有隐藏选择框，当它加载时（基于选择）它会创建另一个选择框（完全没有我创建的任何样式）。这是我目前的问题，任何反馈都会有很大帮助。
当用户选择父级的时，它将显示第三个子级。这就是为什么有 3 个子控件的原因...您需要将数组中的所有三个子控件都命名为单个容器中，这样它才能根据选择顺利出现所需的选择框。我不确定你的问题是什么……
我对父元素和子元素将持有什么感到困惑。我了解其中 2 个孩子的选择将在其中一个上保留 1 月至 12 月，在另一个上保留当前月份、本月至今和过去 7 天。我不明白的是 dateselector_child_ 持有和 dateselector_parent 持有
非常清楚！！！感谢您的所有帮助！太感谢了！现在我明白你的意思了。谢谢你:)

【解决方案2】：

只是一个起点！

$("#dateselector_parent").change(function() {
    $('#dateselector_child').val($(this).find("option:selected").index());
});

Demo

【讨论】：

我认为他需要根据父下拉列表的选择从子下拉列表中删除不需要的选项。
卡夫是正确的。我将如何隐藏其余元素？

【解决方案3】：

AJAX，扩展到异步 JavaScript 和 XML。它涉及编写XMLHTTPRequest 以从服务器检索内容。

如果您可以将逻辑（选择某个选项时显示的内容）存储在几行代码中，则可以将其嵌入到 JavaScript 或 jQuery 中。

因此，在您的情况下，没有必要使用 AJAX。您可以使用 JavaScript 中的一些代码来完成此操作。

“Creating a 2 level interdependent select list”可能会有所帮助。

【讨论】：