Dynamic Select Box using PHP

Hello friends, in this post we will learn about creating dynamic select box using PHP. Here we will create dynamic select box using PHP array. In most of the project development we have this as a basic requirement.

Followings are the step by step procedure to implement this task,

Step 1: ( Create the array )

In this step we will create two arrays i.e $techArr and $topicArr for displaying list of technologies and their corresponding topics respectively,

$techarr = array(
      '1' =>  'PHP',
      '2' => 'Java',
      '3' => '.Net',
      '4' => 'Python'
 );
$topicArr = array(
      '1' => array(
          '1' => 'Introduction to PHP',
          '2' => 'Variables in PHP',
          '3' => 'PHP Session Management'
      ),
      '2' => array(
          '1' => 'Introduction to Java',
          '2' => 'String class in Java',
          '3' => 'OOPs in Java'
      ),
      '3' => array(
          '1' => 'Introduction to .Net',
          '2' => 'OOPs in .Net',
          '3' => 'Session Management in .Net'
      ),
      '4' => array(
          '1' => 'Introduction to Python',
          '2' => 'Topple in Python',
          '3' => 'OOPs in Python'
      )
 );

Step 2: ( Write the logic to display dynamic select box )

Now we will write the code to display the dynamic select box by applying foreach loop to the two arrays $techArr and $topicArr,

<select onchange = "getTopic(this)">
   <option>------ select --------</option>
   <?php
       foreach($arr as $k => $v){
           if(isset($_GET['pl']) && $_GET['pl']  ==  $k){
   ?>
   <option value = "<?php echo $k ?>" selected> <?php echo $v ?> </option>
   <?php
           }else{
   ?>
   <option value = "<?php echo $k ?>"> <?php echo $v ?> </option>
   <?php
           }
    }
   ?>
  </select>
  <select>
      <?php
          if(isset($_GET['pl'])){
              if(isset($topicArr[$_GET['pl']])){
      ?>
              <?php
                  foreach($topicArr[$_GET['pl']] as $key => $val){
              ?>
                      <option value = "<?php echo $key ?>"> <?php echo $val ?> </option>
              <?php
                  }
               ?>
     <?php
               }
          }
     ?>
  </select>

Following is the javascript code to call getTopic() method for displaying the dynamic select box,

<script>
 function getTopic(tech){
 
  // Here tech is the selected option object from the select box
  
  window.location = "http://localhost:8081/dselect.php?pl=" + tech.value;
 }
</script>

Complete Code :

Following is the complete code,

<script>
    function getTopic(tech){
 
        // Here tech is the selected option object from the select box
  
        window.location = "http://localhost:8081/dselect.php?pl=" + tech.value;
    }
</script>
<style>
    select{
        color: black;
        height: 30px;
        font-weight: bold;
        width: 180px;
        padding: 5px;
        border: 2px solid black;
    }
</style>
<?php
    $techArr = array(
        '1' =>  'PHP',
        '2' => 'Java',
        '3' => '.Net',
        '4' => 'Python'
    );
    $topicArr = array(
        '1' => array(
                   '1' => 'Introduction to PHP',
                   '2' => 'Variables in PHP',
                   '3' => 'PHP Session Management'
               ),
        '2' => array(
                   '1' => 'Introduction to Java',
                   '2' => 'String class in Java',
                   '3' => 'OOPs in Java'
               ),
        '3' => array(
                   '1' => 'Introduction to .Net',
                   '2' => 'OOPs in .Net',
                   '3' => 'Session Management in .Net'
               ),
        '4' => array(
                   '1' => 'Introduction to Python',
                   '2' => 'Topple in Python',
                   '3' => 'OOPs in Python'
               )
      );
 ?>
<select onchange = "getTopic(this)">
    <option>------ select --------</option>
    <?php
        foreach($techArr as $k => $v){
            if(isset($_GET['pl']) && $_GET['pl']  ==  $k){
    ?>
            <option value = "<?php echo $k ?>" selected> <?php echo $v ?> </option>
            <?php
            }else{
            ?>
            <option value = "<?php echo $k ?>"> <?php echo $v ?> </option>
            <?php
            }
      }
     ?>
</select>
<select>
    <?php
        if(isset($_GET['pl'])){
            if(isset($topicArr[$_GET['pl']])){
            ?>
            <?php
                foreach($topicArr[$_GET['pl']] as $key => $val){
                ?>
                    <option value = "<?php echo $key ?>"> <?php echo $val ?> </option>
               <?php
                  }
             ?>
             <?php
             }
            }
          ?>
</select>