Multi-select dropdown

EmmaS

yesterday

This script shows how to let users pick multiple items from a list (using CTRL or CMD to select more than one) and then process those selections with PHP.

<?php
declare(strict_types=1);

// -------------------------------
// PROCESS FORM SUBMISSION
// -------------------------------
$skills = filter_input(INPUT_POST, 'skills', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);

$results = [];

if ($skills) {
    $i = 1;
    foreach ($skills as $key => $value) {
        $results[] = "Skill {$i}: " . htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
        $i++;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Skill Selector</title>

<style>
    body {
        font-family: system-ui, sans-serif;
        background: #f5f7fa;
        padding: 40px;
    }
    h3 {
        margin-bottom: 20px;
        color: #333;
    }
    .result-box {
        background: white;
        padding: 15px 20px;
        margin-bottom: 25px;
        border-left: 5px solid #4a90e2;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    select {
        width: 250px;
        height: 160px;
        padding: 8px;
        border-radius: 6px;
        font-size: 15px;
    }
    button {
        margin-top: 15px;
        padding: 10px 18px;
        border: none;
        border-radius: 6px;
        background: #4a90e2;
        color: white;
        cursor: pointer;
        font-size: 16px;
    }
    button:hover {
        background: #3576c7;
    }
</style>

</head>
<body>

<h3>Select Your Skills</h3>

<?php if (!empty($results)): ?>
    <div class="result-box">
        <strong>You selected:</strong>

        <?php foreach ($results as $line): ?>
            <?= $line ?>

        <?php endforeach; ?>
    </div>
<?php endif; ?>

<form method="post">
    <label>What skills do you have?</label>

    <small>(Hold CTRL or CMD to select multiple)</small>



    <select name="skills[]" multiple>
        <option value="HTML5">HTML5</option>
        <option value="CSS3">CSS3</option>
        <option value="JavaScript">JavaScript</option>
        <option value="TypeScript">TypeScript</option>
        <option value="PHP">PHP</option>
        <option value="MySQL">MySQL</option>
    </select>

    

    <button type="submit">Submit</button>
</form>

</body>
</html>

You must be logged in to post a reply.

Support StreamCode Studio

Popular Topics