Dropdown to Array – Convert HTML Options to Code

Dropdown HTML

Paste HTML select/dropdown content and convert to various array formats

About Dropdown to Array Converter

The Dropdown to Array Converter is a utility tool that helps developers convert HTML select/dropdown elements into various array and object formats for different programming languages. This tool saves time when working with form elements across platforms, allowing you to quickly transform dropdown options into usable data structures.

All conversion happens directly in your browser – your HTML code is never sent to a server, ensuring privacy and security when working with sensitive data.

How to Use This Tool

Paste Your HTML: Copy and paste your HTML select element with options into the input area. You can paste a complete select element or just the option tags.
Select Output Format: Choose the programming language and format you want to convert to (JSON, JavaScript, PHP, or WordPress).
Choose Array Structure: Pick how you want your data structured:
- Associative: Object/array with value as key and text as value
- Numeric: Arrays containing both ID and text value
- Simple: Just the text values in an array
Enable Slugified Keys: Optionally, you can enable this feature to automatically generate clean, URL-friendly keys from the option values instead of using the raw values, which is especially useful for associative structures.
Convert: Click the “Convert” button to generate your output.
Copy Result: Use the copy button to copy the result to your clipboard.

Example Usage

Input Example:

<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
select>

Output Examples:

JSON Associative Output:

[
	{
		"key": "us",
		"value": "United States"
	},
	{
		"key": "ca",
		"value": "Canada"
	},
	{
		"key": "uk",
		"value": "United Kingdom"
	},
	{
		"key": "au",
		"value": "Australia"
	}
]

JavaScript Array (Associative with Slugified Keys):

const dropdownArray = [
	{
		"key": "us",
		"value": "United States"
	},
	{
		"key": "ca",
		"value": "Canada"
	},
	{
		"key": "uk",
		"value": "United Kingdom"
	},
	{
		"key": "au",
		"value": "Australia"
	}
];

PHP Array (Simple):

<?php
$data = array(
	'United States',
	'Canada',
	'United Kingdom',
	'Australia'
);

WordPress Select Options (Associative):

<?php
$data = array(
	'us' => __( 'United States', 'text-domain' ),
	'ca' => __( 'Canada', 'text-domain' ),
	'uk' => __( 'United Kingdom', 'text-domain' ),
	'au' => __( 'Australia', 'text-domain' )
);

Why Use This Tool

Quickly convert HTML dropdowns to usable data structures for your code.
Save time when migrating between platforms or languages.
Generate slugified keys automatically for cleaner code and better compatibility.
Easily format data for use in JavaScript, PHP, or WordPress applications.
Transform user interface elements directly into data structures for API integration.
Generate WordPress-ready select option arrays with proper formatting.

Credits & Source

Maintained by Vijay Hardaha. This tool is built with web developers in mind to streamline the process of working with dropdown menus across different programming environments.