Cambiar dinámicamente las opciones del cuadro de selección según la selección de la opción anterior

Question

Sep 26, 2012, 05:48 PM

Cambiar dinámicamente las opciones del cuadro de selección según la selección de la opción anterior

Lo que estoy tratando de lograr es lo siguiente ... 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>

Esto crea dos cuadros de selección, quiero que un cuadro muestre contenido de acuerdo con lo que el usuario elija en el otro. Por ejemplo, si el usuario elige, 2010 o 2011 o 2012, quiero mostrar de enero a diciembre como opciones en la segunda. Si el usuario elige Fechas predefinidas, deseo mostrar el mes actual, el mes hasta la fecha y los últimos 7 días. El complemento javascript que estoy usando permite al usuario definir los métodos onChange, onOpen y onClose. He estado haciendo algunas investigaciones y parece que AJAX está involucrado en tratar de lograr esto, pero como no sé un poco de PHP, me gustaría saber si es posible lograr esto con jQuery. (He intentado resolver este problema sin suerte, por supuesto, no estoy buscando a alguien que lo haga por mí, solo quiero que apunte en la dirección correcta, si puedo lograr esto con jQuery o si es necesario usar AJAX ya que no he visto un ejemplo en línea solo con jQuery).

Cualquier ayuda será apreciada.