Input selon 2 select

LesTutossUE4
Javascript

Bonjour,

En utilisant le script Typeahead du Bootstrap de twitter, je voudrais avoir un content selon deux select précèdent.
Sachant qu'en plus le deuxième select sera en fonction du premier.

Donc Select n°1 :

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Select n°2 si 1 est sélectionné dans le Select n°1 : 

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="9">9</option>
</select>

Select n°2 si 2 est sélectionné dans le Select n°1 : 

<select>
    <option value="2">2</option>
    <option value="9">9</option>
</select>

Select n°2 si 3 est sélectionné dans le Select n°1 : 

<select>
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="6">6</option>
</select>

Select n°2 si 4 est sélectionné dans le Select n°1 : 

<select>
    <option value="2">2</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

Input avec data-source selon la valeur sélectionné du Select n°2 : 

<input type="text" data-source=""Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]">

Merci D'avance.
PS: Si il y a quelque chose que vous ne comprenez pas, demandez moi.

2 réponses

snollito

Tu peux mettre ceci en HTML :

<select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select id="select2" class="toHide">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="9">9</option>
</select>
<select id="select3" class="toHide">
    <option value="2">2</option>
    <option value="9">9</option>
</select>
<select id="select4" class="toHide">
    <option value="3">3</option>
    <option value="2">2</option>
    <option value="6">6</option>
</select>
<select id="select5" class="toHide">
    <option value="2">2</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<input id="text" type="text" data-source="Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana">

Et ceci en JS : 

$(function(){
        $(".toHide").hide();
        $("#select1 option").click(function(){
            var value = $(this).val();
            value = parseInt(value);
            value += 1;
            $(".toHide").hide();
            $("#select" + value).show();
        });

        $(".toHide option").click(function(){
            $(".toHide option").removeClass("selected");
            $(this).addClass("selected");
            var selection = $(".selected").val();
            selection = parseInt(selection);
            selection -= 1;
            var country = new Array();
            country = $("#text").attr("data-source");
            country = country.split(',');
            $("#text").attr("value", country[selection]);
        });
    });
LesTutossUE4
Auteur

$("#select1 option") ne fonctionne pas mais cela fonctionne avec juste $("#select1")