JSFiddle - React, Tailwind, and code Playground

by Joey Ng'ethe

HTML

<div class="prodselectbox">
		<div class="floatleft cat">Category</div>
		
		<div class="floatleft catid">
		<select id="selectcat" name="categoryselected">
		    <option value="" class="rhth">Select Category</option>
			<option value="Edible Oils" id="selectionone">Edible Oils</option>
			<option value="Vegetable Cooking Fats" id="selectiontwo">Vegetable Cooking Fats</option>
			<option value="Personal Care" id="selectionthree">Personal Care</option>
			<option value="Margarines" id="selectionfour">Margarines</option>
			<option value="Baking" id="selectionfive">Baking</option>
			<option value="Laundry Detergents" id="selectionsix">Laundry Detergents</option>
			<option value="Laundry Soaps" id="selectionseven">Laundry Soaps</option>
		</select>


		</div>
        <div class="floatleft artid">Product</div>
		<div class="floatleft selectarticle">
		<select id="selectprod" name="articleID">
		     <option value="" class="rhth23">Select Product</option>
			<option value="elianto" class="selectors edibles">Elianto</option>
			<option value="ufuta" class="hidden selectors edibles">Ufuta</option>
			<option value="bahari-fry" class="selectors edibles">Bahari Fry</option>
			<option value="golden-fry" class="selectors edibles">Golden Fry</option>
			<option value="olive-gold" class="selectors edibles">Olive Gold</option>
			<option value="soya-gold" class="selectors edibles">Soya Gold</option>
			<option value="sun-gold" class="selectors edibles">Sun Gold</option>
			<option value="chipo-pus-3" class="selectors vegfats">Chipo Plus 3</option>
			<option value="cowboy" class="selectors vegfats">Cowboy</option>
			<option value="kimbo" class="selectors vegfats">Kimbo</option>
			<option value="mallo" class="selectors vegfats">Mallo</option>
			<option value="veebol-vegetable-cooking-fat" class="selectors vegfats">Veebol Vegetable Fat</option>
			<option value="yello" class="selectors vegfats">Yello</option>
			<option value="pure-natural-active-man" class="selectors...

CSS

.floatleft{float:left;}
.clearfix{clear:both;}

JavaScript

$(document).ready(function(){
    //if Edible Oils Selected filter class edibles
   if($('#selectionone').is(':selected')){
        $('#selectprod option').filter('.edibles');   
    
    }
    
    //if Veg cooking fats Selected filter class vegfats



});