JSFiddle - React, Tailwind, and code Playground

by lshettyl

HTML

<label for="vertical">Vertical</label>
      <select name="vertical" id="vertical">
        <option value="">Please select a vertical</option>
        <option value="restaurant">Restaurant</option>
        <option value="service">Service</option>
          <option value="retail">Retail</option>
      </select>

    <label>Category</label>
    <select name="categories" id="categories">
      <option value="">Please select a category</option>
      <option value="order-mgmt-apps">Order Management</option>
      <option value="inventory-mgmt">Inventory Management</option>

    </select>
    <div class="vertCat restaurant order-mgmt-apps">Restaurant and Order</div>
    <div class="vertCat restaurant inventory-mgmt ">Restaurant and Inventory</div>
    <div class="vertCat restaurant employee-mgmt">Restaurant and Employee</div>
    <div class="vertCat service order-mgmt-apps ">Service and Order</div>

JavaScript

$("select").on("change", toggleMe);
    
    var toggleMe = function() {
    
        var $this = $(this);
        var ID = this.id === "categories" ? "categories" : "vertical";
        var divs = $('.vertCat');
        divs.filter(":visible").hide();
        divs.filter(function(){
            return this.className.indexOf($this.val()) !== -1
        }).show();
    };