How to set the selected item in a drop down box using PHP

Geekydaayaree May 22, 2021

 In this article, I will tell you how you can set the selected value from the select option tag or drop-down menu as active/selected.

Application: 

This is basically used at the time of modifying/updating the existing form. When you have fetched some data from the existing drop-down box and want to show that data in the updating form.

Technology Used:

HTML, CSS, PHP

Source Code:

HTML:

   
         <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>
<body>
<div class="test_container">
<ul class="wrapper">
<li>
<form action="" method="POST">
<label for="os">Operating System: </label>
<select name="os" id="os">
        <option value="Windows">Windows</option>
        <option value="Windows">Mac</option>
        <option value="Linux">Linux</option>
        <option value="Android">Android</option>
        <option value="IOS">IOS</option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>
</li>
<li>
<label for="">Selected Value: </label>
<input type="text" name="select_input" id="" value="">
</li>
</ul>
</div>
</body>
</html>

CSS:

   

          <style>
        .test_container{
                width: 600px;
                border: 2px solid black;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
        }
        .wrapper li{                
                display: flex;
                margin: 10px;
        }
        </style>

PHP:

   
        <?php htmlentities($_SERVER['PHP_SELF']);?>
        <?php echo ($_POST['os'] == 'Windows'?'selected':'')?>
        <?php echo ($_POST['os'] == 'Mac'?'selected':'')?>
        <?php echo ($_POST['os'] == 'Linux'?'selected':'')?>
        <?php echo ($_POST['os'] == 'Android'?'selected':'')?>
        <?php echo ($_POST['os'] == 'IOS'?'selected':'')?>
        <?php echo $_POST['os']?>

Complete Source Code:

   
        <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        .test_container{
                width: 600px;
                border: 2px solid black;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
        }
        .wrapper li{                
                display: flex;
                margin: 10px;
        }
        </style>

       
</head>
<body>
<div class="test_container">
<ul class="wrapper">
<li>
<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" method="POST">
<label for="os">Operating System: </label>
<select name="os" id="os">
        <option value="Windows" <?php echo ($_POST['os'] == 'Windows'?'selected':'')?>>Windows</option>
        <option value="Windows" <?php echo ($_POST['os'] == 'Mac'?'selected':'')?>>Mac</option>
        <option value="Linux" <?php echo ($_POST['os'] == 'Linux'?'selected':'')?>>Linux</option>
        <option value="Android" <?php echo ($_POST['os'] == 'Android'?'selected':'')?>>Android</option>
        <option value="IOS" <?php echo ($_POST['os'] == 'IOS'?'selected':'')?>>IOS</option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>
</li>
<li>
<label for="">Selected Value: </label>
<input type="text" name="select_input" id="" value="<?php echo $_POST['os']?>">
</li>
</ul>
</div>
</body>
</html>

Thank you.!
Tags:

Post a Comment

0 Comments