CODEWITHSUNDEEP
phphtmlcombobox
Aan
Aan

Reputation: 12920

Combobox items based on selected item in another combobox

If I have a combobox1 has the items: Fruits & vegetables.

I need to show a nother combobox2 based on the selected item in combobox1.

If the selected item in combobox1 is Fruits, then combobox2 items are: apple, orange ..etc.

If the selected item in combobox1 is vegetables, then combobox2 items are: radish, lettuce..etc.

How can I do that using PHP & HTML? (Please consider "PHP & HTML only" as a condition).

Upvotes: 0

Views: 14946

Answers (3)

danicotra
danicotra

Reputation: 1433

Unfortunately your conditions (PHP & HTML only, not javascript) means you should reload the page/load another page with a form submission after every change on your combobox, as it would be the only way for you to understand what is the selected value since you decided to work only server-side (PHP).

If you decide not to take advantage of javascript (or a javascript framework such as jQuery) you won't be able to modify contents in your page without form submission, therefore you won't be able to change the second combobox elements if you didn't submitted the first combobox selection.

Upvotes: 3

Leonardo Meurer
Leonardo Meurer

Reputation: 46

You can do this using 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>

Upvotes: 1

user862010
user862010

Reputation:

You can do this:

<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>

Then in the PHP page, you get an array with the data to be added to the drop box, of course you'll also have to send an ajax call to populate the drop box, then in the php page, you have the following:

<?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 ) ;
    }

Now, you just need to adjust the validations .. etc.

Upvotes: 2

Related Questions