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

Question

我想要完成的是以下内容……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的在线示例）。

任何帮助将不胜感激

Answer 1

希望以下工作能满足您的要求。 具有3个子下拉菜单（无div）1.-选择-，2.十二月至十二月3.其他选项

$().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）函数。 当页面准备就绪时（加载后），并且当用户更改选择时，Parent的选择值将传递给该函数。 父母的选择值可以是“”，“ 1”，“ 2”。 接下来，foreach循环找到需要显示的孩子的名字，其他孩子则被隐藏。 如果用户选择父项的--- Select ---选项，则该函数将显示“ dateselector_child_”，而其他两个则隐藏。

希望现在清楚了...

Answer 2

只是一个起点！

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

演示

Answer 3

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

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

因此，就您而言，没有必要使用AJAX。 您可以使用JavaScript中的一些代码来完成此操作。

“ 创建一个二级相互依赖的选择列表 ”可能会有所帮助。

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-09-27 09:21:16

解决方案2
0 2012-09-26 15:56:26

解决方案3
0 2012-09-26 16:05:33

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-09-27 09:21:16

解决方案2 0 2012-09-26 15:56:26

解决方案3 0 2012-09-26 16:05:33

解决方案1
1 已采纳 2012-09-27 09:21:16

解决方案2
0 2012-09-26 15:56:26

解决方案3
0 2012-09-26 16:05:33