JSFiddle - React, Tailwind, and code Playground

HTML

<select name="category" id ='category' style="background:transparent">
	<option id ='gender' hidden="hidden">Gender</option>
	<option value="men">Men's</option>
	<option value="girl">Ladies</option>
</select>

<select name="items" id="items">
<select>

JavaScript

var dropdown_items = [{"gender":0,"name":"Googer"},{"gender":1,"name":"Booger"},{"gender":0,"name":"Looger"},{"gender":1,"name":"Shooger"}];
    $(function () {
        $("#category").change(function () {
            var selectedText = $(this).find("option:selected").text();
            var selectedValue = $(this).val();
            var opts = [];
            $.each(dropdown_items,function(k,v){
                if(selectedValue == 'men' && v.gender == 0) {
                    opts.push('<option name="'+v.gender+'">'+v.name+'</option>');
                }
                else if(selectedValue == 'girl' && v.gender == 1) {
                    opts.push('<option name="'+v.gender+'">'+v.name+'</option>');
                }
            });
			
				console.log(opts.join(''));
			
            $('#items').html(opts.join(''));
        });
    });