Food And Drink Preference List For HTML Dropdown Menu

This page offers a comprehensive list of Food and Drink, categorized into groups such as Dietary Preferences, Religious/Cultural,Health-Related and more. The data names list is available in three formats: HTML drop-down menus, JavaScript arrays, and PHP arrays.

Creating a dynamic food and drink choice tool for your online forms. Whether you're coding or managing a website, our examples help you make it easier for users to select and get a customized experience.

Create Custom Food and Drink List for Your Needs

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

Multilingual Options. Translated versions of the food and drink list are available in various languages

Language

#	Name	Category
1	Omnivore	Dietary Preferences
2	Vegetarian	Dietary Preferences
3	Vegan	Dietary Preferences
4	Pescatarian	Dietary Preferences
5	Flexitarian	Dietary Preferences
6	Fruitarian	Dietary Preferences
7	Carnivore	Dietary Preferences
8	Lacto Vegetarian	Dietary Preferences
9	Ovo Vegetarian	Dietary Preferences
10	Lacto-Ovo Vegetarian	Dietary Preferences

HTML Drop Down

This is the part of the HTML code for choosing a file format drop-down.

HTML

<select id="food-drink-preference" name="food-drink-preference" aria-label="Select your food and drink preferences">
    <optgroup label="Dietary Preferences">
        <option value="omnivore">Omnivore</option>
        <option value="vegetarian">Vegetarian</option>
        <option value="vegan">Vegan</option>
        <option value="pescatarian">Pescatarian</option>
        <option value="flexitarian">Flexitarian</option>
        <option value="fruitarian">Fruitarian</option>
        <option value="carnivore">Carnivore</option>
        <option value="lacto-vegetarian">Lacto Vegetarian</option>
        <option value="ovo-vegetarian">Ovo Vegetarian</option>
        <option value="lacto-ovo-vegetarian">Lacto-Ovo Vegetarian</option>
        <option value="pegan">Pegan (Paleo-Vegan)</option>
        <option value="climatarian">Climatarian (Low-carbon diet)</option>
    </optgroup>
    <optgroup label="Religious/Cultural">
        <option value="halal">Halal</option>
        <option value="kosher">Kosher</option>
        <option value="jain">Jain</option>
        <option value="rastafarian">Rastafarian</option>
    </optgroup>
    <optgroup label="Health-Related">
        <option value="gluten-free">Gluten-Free</option>
        <option value="dairy-free">Dairy-Free</option>
        <option value="nut-free">Nut-Free</option>
        <option value="soy-free">Soy-Free</option>
        <option value="low-carb">Low-Carb</option>
        <option value="low-sodium">Low-Sodium</option>
        <option value="low-fodmap">Low-FODMAP</option>
        <option value="anti-inflammatory">Anti-inflammatory</option>
        <option value="low-sugar">Low-Sugar</option>
        <option value="heart-healthy">Heart-Healthy</option>
        <option value="low-fat">Low-Fat</option>
        <option value="high-protein">High-Protein</option>
        <option value="raw-food">Raw Food</option>
    </optgroup>
    <optgroup label="Beverage Preferences">
        <option value="non-alcoholic">Non-Alcoholic</option>
        <option value="alcoholic">Alcoholic</option>
        <option value="caffeine-free">Caffeine-Free</option>
        <option value="sugar-free">Sugar-Free</option>
        <option value="coffee">Coffee</option>
        <option value="tea">Tea</option>
        <option value="herbal-teas">Herbal Teas</option>
        <option value="juice">Juice</option>
        <option value="smoothies">Smoothies</option>
        <option value="energy-drinks">Energy Drinks</option>
        <option value="soda">Soda</option>
        <option value="water">Water</option>
        <option value="milk">Milk</option>
        <option value="beer">Beer</option>
        <option value="wine">Wine</option>
        <option value="cocktails">Cocktails</option>
    </optgroup>
    <optgroup label="Meat Preferences">
        <option value="beef">Beef</option>
        <option value="chicken">Chicken</option>
        <option value="pork">Pork</option>
        <option value="lamb">Lamb</option>
        <option value="turkey">Turkey</option>
        <option value="fish">Fish</option>
        <option value="shrimp">Shrimp</option>
        <option value="bacon">Bacon</option>
        <option value="sausages">Sausages</option>
    </optgroup>
    <optgroup label="Vegetarian Options">
        <option value="tofu">Tofu</option>
        <option value="tempeh">Tempeh</option>
        <option value="seitan">Seitan</option>
        <option value="mushrooms">Mushrooms</option>
        <option value="eggs">Eggs</option>
    </optgroup>
    <optgroup label="Fruits">
        <option value="apples">Apples</option>
        <option value="bananas">Bananas</option>
        <option value="berries">Berries</option>
        <option value="citrus-fruits">Citrus Fruits</option>
        <option value="tropical-fruits">Tropical Fruits</option>
    </optgroup>
    <optgroup label="Desserts">
        <option value="cakes">Cakes</option>
        <option value="cookies">Cookies</option>
        <option value="pies">Pies</option>
        <option value="ice-cream">Ice Cream</option>
        <option value="brownies">Brownies</option>
        <option value="muffins">Muffins</option>
        <option value="scones">Scones</option>
    </optgroup>
    <optgroup label="Cuisines">
        <option value="italian">Italian</option>
        <option value="chinese">Chinese</option>
        <option value="indian">Indian</option>
        <option value="mexican">Mexican</option>
        <option value="japanese">Japanese</option>
        <option value="korean">Korean</option>
        <option value="thai">Thai</option>
        <option value="vietnamese">Vietnamese</option>
        <option value="middle-eastern">Middle Eastern</option>
    </optgroup>
    <optgroup label="Allergies">
        <option value="peanut-allergy">Peanut Allergy</option>
        <option value="tree-nut-allergy">Tree Nut Allergy</option>
        <option value="dairy-allergy">Dairy Allergy</option>
        <option value="gluten-allergy">Gluten Allergy</option>
        <option value="egg-allergy">Egg Allergy</option>
        <option value="fish-allergy">Fish Allergy</option>
        <option value="shellfish-allergy">Shellfish Allergy</option>
        <option value="soy-allergy">Soy Allergy</option>
    </optgroup>
    <optgroup label="Diet Programs">
        <option value="weight-watchers">Weight Watchers</option>
        <option value="keto-diet">Keto Diet</option>
        <option value="paleo-diet">Paleo Diet</option>
        <option value="mediterranean-diet">Mediterranean Diet</option>
        <option value="dash-diet">DASH Diet</option>
        <option value="whole30">Whole30</option>
        <option value="vegan-diet">Vegan Diet</option>
        <option value="vegetarian-diet">Vegetarian Diet</option>
    </optgroup>
    <optgroup label="Other">
        <option value="organic">Organic</option>
        <option value="local">Locally Sourced</option>
        <option value="plant-based">Plant-Based</option>
        <option value="fair-trade">Fair Trade</option>
        <option value="sustainable">Sustainable</option>
        <option value="whole-foods">Whole Foods</option>
    </optgroup>
</select>

Run code Edit Code Download

JavaScript Array

JavaScript Array of file format list.

This guide shows you how to make dropdown menus for food and drink choices with HTML, JavaScript, and PHP. You'll learn to make selection lists that are easy for users to pick their favorites. By following this tutorial, you can easily add these menus to your websites.

JavaScript

const foodDrinkPreferences = [
  {
    category: "Dietary Preferences",
    options: ["Omnivore", "Vegetarian", "Vegan", "Pescatarian", "Flexitarian", "Fruitarian", "Carnivore", "Lacto Vegetarian", "Ovo Vegetarian", "Lacto-Ovo Vegetarian", "Pegan (Paleo-Vegan)", "Climatarian (Low-carbon diet)"]
  },
  {
    category: "Religious/Cultural",
    options: ["Halal", "Kosher", "Jain", "Rastafarian"]
  },
  {
    category: "Health-Related",
    options: ["Gluten-Free", "Dairy-Free", "Nut-Free", "Soy-Free", "Low-Carb", "Low-Sodium", "Low-FODMAP", "Anti-inflammatory", "Low-Sugar", "Heart-Healthy", "Low-Fat", "High-Protein", "Raw Food"]
  },
  {
    category: "Beverage Preferences",
    options: ["Non-Alcoholic", "Alcoholic", "Caffeine-Free", "Sugar-Free", "Coffee", "Tea", "Herbal Teas", "Juice", "Smoothies", "Energy Drinks", "Soda", "Water", "Milk", "Beer", "Wine", "Cocktails"]
  },
  {
    category: "Meat Preferences",
    options: ["Beef", "Chicken", "Pork", "Lamb", "Turkey", "Fish", "Shrimp", "Bacon", "Sausages"]
  },
  {
    category: "Vegetarian Options",
    options: ["Tofu", "Tempeh", "Seitan", "Mushrooms", "Eggs"]
  },
  {
    category: "Fruits",
    options: ["Apples", "Bananas", "Berries", "Citrus Fruits", "Tropical Fruits"]
  },
  {
    category: "Desserts",
    options: ["Cakes", "Cookies", "Pies", "Ice Cream", "Brownies", "Muffins", "Scones"]
  },
  {
    category: "Cuisines",
    options: ["Italian", "Chinese", "Indian", "Mexican", "Japanese", "Korean", "Thai", "Vietnamese", "Middle Eastern"]
  },
  {
    category: "Allergies",
    options: ["Peanut Allergy", "Tree Nut Allergy", "Dairy Allergy", "Gluten Allergy", "Egg Allergy", "Fish Allergy", "Shellfish Allergy", "Soy Allergy"]
  },
  {
    category: "Diet Programs",
    options: ["Weight Watchers", "Keto Diet", "Paleo Diet", "Mediterranean Diet", "DASH Diet", "Whole30", "Vegan Diet", "Vegetarian Diet"]
  },
  {
    category: "Other",
    options: ["Organic", "Locally Sourced", "Plant-Based", "Fair Trade", "Sustainable", "Whole Foods"]
  }
];

Usage Example

Use this array to create dynamic food and drink preference dropdown

HTML

<select id="food-drink-preference"></select>

javaScripr

const foodSelect = document.getElementById("food-drink-preference");

foodDrinkPreferences.forEach(group => {
    const optgroup = document.createElement("optgroup");
    optgroup.label = group.category;

    group.options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option.toLowerCase().replace(/\s+/g, '-');
        optionElement.textContent = option;
        optgroup.appendChild(optionElement);
    });

    foodSelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

Array of news categories

Create Customizable Food and Drink Preference Dropdown Using PHP array

PHP

<?php
$foodDrinkPreferences = [
    [
        "category" => "Dietary Preferences",
        "options" => ["Omnivore", "Vegetarian", "Vegan", "Pescatarian", "Flexitarian", "Fruitarian", "Carnivore", "Lacto Vegetarian", "Ovo Vegetarian", "Lacto-Ovo Vegetarian", "Pegan (Paleo-Vegan)", "Climatarian (Low-carbon diet)"]
    ],
    [
        "category" => "Religious/Cultural",
        "options" => ["Halal", "Kosher", "Jain", "Rastafarian"]
    ],
    [
        "category" => "Health-Related",
        "options" => ["Gluten-Free", "Dairy-Free", "Nut-Free", "Soy-Free", "Low-Carb", "Low-Sodium", "Low-FODMAP", "Anti-inflammatory", "Low-Sugar", "Heart-Healthy", "Low-Fat", "High-Protein", "Raw Food"]
    ],
    [
        "category" => "Beverage Preferences",
        "options" => ["Non-Alcoholic", "Alcoholic", "Caffeine-Free", "Sugar-Free", "Coffee", "Tea", "Herbal Teas", "Juice", "Smoothies", "Energy Drinks", "Soda", "Water", "Milk", "Beer", "Wine", "Cocktails"]
    ],
    [
        "category" => "Meat Preferences",
        "options" => ["Beef", "Chicken", "Pork", "Lamb", "Turkey", "Fish", "Shrimp", "Bacon", "Sausages"]
    ],
    [
        "category" => "Vegetarian Options",
        "options" => ["Tofu", "Tempeh", "Seitan", "Mushrooms", "Eggs"]
    ],
    [
        "category" => "Fruits",
        "options" => ["Apples", "Bananas", "Berries", "Citrus Fruits", "Tropical Fruits"]
    ],
    [
        "category" => "Desserts",
        "options" => ["Cakes", "Cookies", "Pies", "Ice Cream", "Brownies", "Muffins", "Scones"]
    ],
    [
        "category" => "Cuisines",
        "options" => ["Italian", "Chinese", "Indian", "Mexican", "Japanese", "Korean", "Thai", "Vietnamese", "Middle Eastern"]
    ],
    [
        "category" => "Allergies",
        "options" => ["Peanut Allergy", "Tree Nut Allergy", "Dairy Allergy", "Gluten Allergy", "Egg Allergy", "Fish Allergy", "Shellfish Allergy", "Soy Allergy"]
    ],
    [
        "category" => "Diet Programs",
        "options" => ["Weight Watchers", "Keto Diet", "Paleo Diet", "Mediterranean Diet", "DASH Diet", "Whole30", "Vegan Diet", "Vegetarian Diet"]
    ],
    [
        "category" => "Other",
        "options" => ["Organic", "Locally Sourced", "Plant-Based", "Fair Trade", "Sustainable", "Whole Foods"]
    ],
];
?>

Usage Example PHP Array

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

PHP

<?php
$html = '';
foreach ($foodDrinkPreferences as $group) {
    $html .= '<optgroup label="' . htmlspecialchars($group['category']) . '">';

    foreach ($group['options'] as $option) {
        $value = strtolower($option);
        $value = preg_replace('/\s+/', '-', $value);
        $text = htmlspecialchars($option);
        $html .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
    }

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

<select id="food-drink-preference">
  <?php echo $html ?>
</select>

Download

JavaScript and PHP maintain the grouping structure intact in both arrays, simplifying data manipulation through programming. You can utilize this array for this purpose.

Personalized Meal Planning Service
Restaurant Menu Customization
Corporate Catering Management
Food Festival Planning Tool

Report Problem