Zone de liste déroulante des articles en fonction de l'élément sélectionné dans une autre zone de liste déroulante

Si j'ai un combobox1 a les éléments: les Fruits & légumes.

J'ai besoin de montrer un autre combobox2 fonction de l'élément sélectionné dans combobox1.

Si l'élément sélectionné dans combobox1 est Fruits, puis combobox2 éléments sont: pomme, orange, etc ..

Si l'élément sélectionné dans combobox1 est vegetables, puis combobox2 éléments sont: le radis, la laitue, etc..

Comment puis-je le faire à l'aide de PHP & HTML? (Veuillez considérer "PHP & HTML uniquement" comme condition).

InformationsquelleAutor Aan | 2011-12-03
  1. 3

    Malheureusement, votre conditions (PHP & HTML uniquement, pas de javascript) signifie que vous devez recharger la page/charger une autre page avec un formulaire de soumission après chaque modification sur votre zone de liste déroulante, comme ce serait le seul moyen pour vous de comprendre quelle est la valeur sélectionnée depuis que vous avez décidé de travailler uniquement côté serveur (PHP).

    Si vous décidez de ne pas prendre avantage de javascript (ou d'un framework javascript comme jQuery), vous ne serez pas en mesure de modifier le contenu de votre page sans la soumission d'un formulaire, donc vous ne serez pas en mesure de modifier la deuxième zone de liste déroulante d'éléments si vous n'avez pas soumis de la première zone de liste déroulante de sélection.

    InformationsquelleAutor danicotra
  2. 2

    Vous pouvez faire ceci:

    <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#combo').change(function(){
                    console.log($(this));
                    $.get( "ABC.php" , { option : $(this).val() } , function ( data ) {
                        $ ( '#comboB' ) . html ( data ) ;
                    } ) ;
                });
            });
        </script>
    </head>
    <body>
        <div id="comboBox">
            <fieldset>
                <form>
                    <select name="combo" id="combo">
                        <option value="">-- Select</option>
                        <option value="1">Fruits</option>
                        <option value="2">Vegetables</option>
                    </select>
                    <select name="comboB" id="comboB">
                        <option value="">--</option>
                    </select>
                </form>
            </fieldset>
        </div>
    </body>
</html>

    Puis dans la page PHP, vous obtenez un tableau avec les données pour être ajouté à la boîte de dépôt, bien sûr, vous aurez également à envoyer un appel ajax pour remplir la liste déroulante, puis dans la page php, vous disposez des éléments suivants:

    <?php
    $Options = Array ( 
        1 => Array ( 
            'Apple' ,
            'Orange'
        ) , 
        2 => Array ( 
            'Radish' ,
            'Lettuce'
        )
    ) ; 

    forEach ( $Options [ $_GET [ 'option' ] ] as $Item ) {
        printf ( '<option value="%s">%s</option>' , $Item , $Item ) ;
    }

    Maintenant, vous avez juste besoin d'ajuster les validations etc ..

    • Knupp: je ne suis pas familier avec ajax, mes outils sont uniquement PHP & HTML.. une suggestion?
    • Le code est prêt, vous venez de l'étudier
    • Knupp: ne Peut pas être fait en utilisant le HTML & PHP seulement?veuillez considérer que comme une conditon.
    • non, malheureusement, va entraîner un javascript
    InformationsquelleAutor
  3. 1

    Vous pouvez le faire à l'aide de jquery

    Ex:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" ></script>

<select class="small-input" id="NameCombobox1" name="NameCombobox1">                            
    <option value="0">Select one</option>
    <option value="1">Fruits</option>
    <option value="2">vegetables</option>
</select>

<div id="result"></div>

<script type="text/javascript">

 $('#NameCombobox1').change(function() 
    {                                   
    var NameCombobox1 =  $(this).attr('value'); 

    if( NameCombobox1> 0) {
    $.post(
    "PageWithSelect.php", 
    { BRFLink:  NameCombobox1 },
    function(data) {                                                        
        $("#result").append(data);          
    }, 
     "html"
    );
    }
    $('#result').show();
  });

</script>
    InformationsquelleAutor Leonardo Meurer