Generate options from a select (years) according to another selected field

Question

Generate options from a select (years) according to another selected field

Navigation

#1 by (2 votes)

0

I have a form to register dependents of a plan, where you can choose child, husband, father-in-law, etc. and then the year of birth

I want you to select the type of relationship by changing the select options, eg

Selecionar filho: Máximo ano atual | Mínimo - 35 anos (1982 a 2017)
Pai/mãe:  Máximo ano atual - 12 | Mínimo ano atual - 100 (1917 a 2005)
Outros: Máximo ano atual | Mínimo ano atual - 100 (1917 a 2017)

You can use php, javascript, jquery, qq one.

I just created a rule, I do not know how to bind to the other select:

<select id="grau_parentesco">
<option value="filho">Filho(a)</option>
<option value="pai">Pai</option>
<option value="mae">Mãe</option>
<option value="outros">Outros</option>
</select>
<select id="ano"></option>
<?
$ano_inicial = date("Y");
$qtd = 35;
for($i=0; $i <= $qtd; $i++){
    $ano = $ano_inicial-$i;
    $ano = sprintf("%02s",$ano);
    echo "<option value=\"".$ano."\">".$ano."</option>\n";
}
?>
</select>

php javascript jquery html-select option

asked by anonymous 11.12.2017 / 13:10

1 answer

DOM Jquery does not work with form Custom function for the function sorted in python 3.x

score 2 · Accepted Answer

Here is an example of using JQuery and a simple logic, I left the rules on a switch to make it easier if I wanted to add others.

$("#grau_parentesco").on('change', function () {

        //Selecionar 
        //filho: Máximo ano atual | Mínimo - 35 anos (1982 a 2017)
        //Pai / mãe:  Máximo ano atual - 12 | Mínimo ano atual - 100(1917 a 2005)
        //Outros: Máximo ano atual | Mínimo ano atual - 100(1917 a 2017)


        var maxValue = (new Date()).getFullYear();
        var minValue = maxValue - 100;

        switch ($(this).val()) {
            case "pai":
            case "mae":
                maxValue -= 12;
                break;
            case "filho":
                minValue = maxValue - 35;
                break;
            default:
                break;
        }
        
        //limpa
        $("#ano").find("option").remove();

        //popula
        for (var ano = minValue; ano <= maxValue; ano++) {
           $('#ano').append($('<option>', {
                value: ano,
                text: ano
            }));
        }

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="grau_parentesco">
  <option value="">Selecione</option>
  <option value="filho">Filho(a)</option>
  <option value="pai">Pai</option>
  <option value="mae">Mãe</option>
  <option value="outros">Outros</option>
</select>

<select id="ano">
</select>