Clothing Size Selection For HTML, JavaScript, PHP Array

Here, you will find ready-to-use examples for creating a clothing size dropdown menu. Whether you're working with HTML, JavaScript, or PHP, we've got you covered with clear and practical code snippets to help you integrate and manage size selections on your website.

Create Custom clothing size for Your Needs

Customize your preferred clothing size by selecting options from the provided table. You can then include these selected size in the dropdown menu, JavaScript array, or PHP array. The codes for the selected clothing size will be displayed below.

Multilingual Options. Translated versions of the clothing size selection list are available in various languages

Language

#	Size	Category
1	XXS - Extra Extra Small	Standard Sizes
2	XS - Extra Small	Standard Sizes
3	S - Small	Standard Sizes
4	S-M - Small to Medium	Standard Sizes
5	M - Medium	Standard Sizes
6	M-L - Medium to Large	Standard Sizes
7	L - Large	Standard Sizes
8	XL - Extra Large	Standard Sizes
9	XXL - Extra Extra Large	Standard Sizes
10	XXXL - Triple Extra Large	Standard Sizes
11	XXXXL - Quadruple Extra Large	Standard Sizes
12	XS-S	Half Sizes
13	S-M	Half Sizes
14	M-L	Half Sizes
15	L-XL	Half Sizes
16	XL-XXL	Half Sizes
17	XXL-XXXL	Half Sizes
18	One Size Fits All	Other
19	Custom Size (Please specify in order notes)	Other

HTML Drop Down

Our HTML dropdown snippet provides a structured and accessible way to present clothing size options to users. It includes standard sizes, half sizes, and other options, organized into groups for a clean and user-friendly interface. Use this code to create a dropdown menu on your web page

HTML

<select id="clothing-size" name="clothing-size" aria-label="Select clothing size">
    <optgroup label="Standard Sizes">
        <option value="xxs">XXS - Extra Extra Small</option>
        <option value="xs">XS - Extra Small</option>
        <option value="s">S - Small</option>
        <option value="s-m">S-M - Small to Medium</option>
        <option value="m">M - Medium</option>
        <option value="m-l">M-L - Medium to Large</option>
        <option value="l">L - Large</option>
        <option value="xl">XL - Extra Large</option>
        <option value="xxl">XXL - Extra Extra Large</option>
        <option value="xxxl">XXXL - Triple Extra Large</option>
        <option value="xxxxl">XXXXL - Quadruple Extra Large</option>
    </optgroup>
    <optgroup label="Half Sizes">
        <option value="xs-s">XS-S</option>
        <option value="s-m">S-M</option>
        <option value="m-l">M-L</option>
        <option value="l-xl">L-XL</option>
        <option value="xl-xxl">XL-XXL</option>
        <option value="xxl-xxxl">XXL-XXXL</option>
    </optgroup>
    <optgroup label="Other">
        <option value="one-size">One Size Fits All</option>
        <option value="custom">Custom Size (Please specify in order notes)</option>
    </optgroup>
</select>

Run code Edit Code Download

JavaScript Array

JavaScript Array of clothing sizes

For dynamic size dropdown generation using JavaScript, use the following array-based approach. This snippet shows how to define clothing sizes in a JavaScript array and generate the dropdown menu programmatically

JavaScript

const clothingSizes = [
    {
        category: "Standard Sizes",
        options: [
            { value: "xxs", text: "XXS - Extra Extra Small" },
            { value: "xs", text: "XS - Extra Small" },
            { value: "s", text: "S - Small" },
            { value: "s-m", text: "S-M - Small to Medium" },
            { value: "m", text: "M - Medium" },
            { value: "m-l", text: "M-L - Medium to Large" },
            { value: "l", text: "L - Large" },
            { value: "xl", text: "XL - Extra Large" },
            { value: "xxl", text: "XXL - Extra Extra Large" },
            { value: "xxxl", text: "XXXL - Triple Extra Large" },
            { value: "xxxxl", text: "XXXXL - Quadruple Extra Large" }
        ]
    },
    {
        category: "Half Sizes",
        options: [
            { value: "xs-s", text: "XS-S" },
            { value: "s-m", text: "S-M" },
            { value: "m-l", text: "M-L" },
            { value: "l-xl", text: "L-XL" },
            { value: "xl-xxl", text: "XL-XXL" },
            { value: "xxl-xxxl", text: "XXL-XXXL" }
        ]
    },
    {
        category: "Other",
        options: [
            { value: "one-size", text: "One Size Fits All" },
            { value: "custom", text: "Custom Size (Please specify in order notes)" }
        ]
    }
];

Usage Example

Use this array to create dynamic dropdown menu

HTML

<select id="clothing-size">
  <option value="">Select clothing size</option>
</select>

javaScripr

const sizeSelect = document.getElementById("clothing-size");
// Populate dropdown
clothingSizes.forEach(group => {
    const optgroup = document.createElement("optgroup");
    optgroup.label = group.category;

    group.options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.text;
        optgroup.appendChild(optionElement);
    });

    sizeSelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

PHP Array of clothing sizes

If you are working with PHP, use the following array to define your clothing sizes. This snippet includes an example of how to generate a dropdown menu based on a PHP array:

PHP

<?php
$clothingSizes = [
    [
        'category' => 'Standard Sizes',
        'options' => [
            ['value' => 'xxs', 'text' => 'XXS - Extra Extra Small'],
            ['value' => 'xs', 'text' => 'XS - Extra Small'],
            ['value' => 's', 'text' => 'S - Small'],
            ['value' => 's-m', 'text' => 'S-M - Small to Medium'],
            ['value' => 'm', 'text' => 'M - Medium'],
            ['value' => 'm-l', 'text' => 'M-L - Medium to Large'],
            ['value' => 'l', 'text' => 'L - Large'],
            ['value' => 'xl', 'text' => 'XL - Extra Large'],
            ['value' => 'xxl', 'text' => 'XXL - Extra Extra Large'],
            ['value' => 'xxxl', 'text' => 'XXXL - Triple Extra Large'],
            ['value' => 'xxxxl', 'text' => 'XXXXL - Quadruple Extra Large']
        ]
    ],
    [
        'category' => 'Half Sizes',
        'options' => [
            ['value' => 'xs-s', 'text' => 'XS-S'],
            ['value' => 's-m', 'text' => 'S-M'],
            ['value' => 'm-l', 'text' => 'M-L'],
            ['value' => 'l-xl', 'text' => 'L-XL'],
            ['value' => 'xl-xxl', 'text' => 'XL-XXL'],
            ['value' => 'xxl-xxxl', 'text' => 'XXL-XXXL']
        ]
    ],
    [
        'category' => 'Other',
        'options' => [
            ['value' => 'one-size', 'text' => 'One Size Fits All'],
            ['value' => 'custom', 'text' => 'Custom Size (Please specify in order notes)']
        ]
    ]
];
?>

Usage Example PHP Array

Here is a quick example of how you might use this array to generate an HTML select option

PHP

<?php
$selectOption = '';
// create dropdown
foreach ($clothingSizes as $group) {
    $selectOption .= '<optgroup label="' . htmlspecialchars($group['category']) . '">'.PHP_EOL;

    foreach ($group['options'] as $option) {
        $value = strtolower($option['value']);
        $text = htmlspecialchars($option['text']);
        $selectOption .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
    }

    $selectOption .= '</optgroup>'.PHP_EOL;
}
?>

<select id="clothing-size">
  <?php echo $selectOption ?>
</select>

Download

Use Cases

The Clothing Size Selection code snippets are useful in many web development situations. Here are some common uses:

E-Commerce Websites
Rental Clothing Services
Sports and Outdoor Gear
Medical and Uniforms
Charity and Donation Drives

Report Problem