JSFiddle - React, Tailwind, and code Playground

by guilhermebomba18

HTML

<form method="post" id="form">
      <div class="row justify-content-center">
        <div class="col-md-4">
          <div class="form-group">
            <select name="categories" class="form-control">
              <option value="câmera">câmera</option>
              <option value="celular">Celular</option>
              <option value="computador">Computador</option>
            </select>
          </div>
        </div>
        <div class="col-md-4">
          <div class="form-group">
            <select name="equipments" class="form-control">
              <option data-name="câmera" value="GoPro">GoPro</option>
              <option data-name="celular" value="Samsung A10">Samsung A10</option>
              <option data-name="computador" value="Notebook">Notebook</option>
            </select>
          </div>
        </div>
      </div>
    </form>

JavaScript

$(document).ready(function () {
    var equipments = $("select[name=equipments] option")

    $("select[name=categories]").on("change", function () {
        var categories = this.value

        var newSelect = equipments.filter(function () {
            return $(this).data("name") == categories
        })

        $("select[name=equipments]").html(newSelect)
    })
})