JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<select id="food" name="food">
    <option value="">...</option>
    <option value="Fruits">Fruits</option>
    <option value="Vegetables">Vegetables</option>
</select>
<select id="type" name="type">
    <option value="">--</option>
    <option value="Apple">Apple</option>
    <option value="Lettuce">Lettuce</option>
    <option value="Orange">Orange</option>
    <option value="Tomato">Tomato</option>
    <option value="Carrots">Carrots</option>
    <option value="Mango">Mango</option>
</select>

JavaScript

var fruitOpts = ["Apple", "Orange", "Mango"];
var vegOpts = ["Lettuce", "Tomato", "Carrots"];

$("#food").change(function () {
    var val = $(this).val();
    if (val === "") {
        return;
    }
    $("#type").find('option').not(':first').remove().end();

    $.each(val === "Fruits" ? fruitOpts : vegOpts, function (i, v) {
        $("#type").append("<option value=\"" + v + "\">" + v + "</option>");
    });

    $.each(val === "Fruits" ? vegOpts : fruitOpts, function (i, v) {
        $("#type").append("<option value=\"" + v + "\">" + v + "</option>");
    });
});