JSFiddle - React, Tailwind, and code Playground

HTML

<select id="category">
    <option value='1'>Categroy 1</option>
    <option value='2'>Categroy 2</option>
    <option value='3'>Categroy 3</option>
</select>
<select id="sub-category">
    <option value='1' data-parentid='1'>Car1</option>
    <option value='2' data-parentid='1'>Car2</option>
    <option selected='selected' value='3' data-parentid='1'>Car3</option>
    <option value='4' data-parentid='1'>Car4</option>
    <option value='5' data-parentid='1'>Car5</option>
    <option value='6' data-parentid='2'>Car6</option>
    <option value='7' data-parentid='2'>Car7</option>
    <option value='8' data-parentid='2'>Car8</option>
    <option value='9' data-parentid='3'>Car9</option>
    <option value='10' data-parentid='3'>Car10</option>
    <option value='11' data-parentid='3'>Car11</option>
    <option value='12' data-parentid='3'>Car12</option>
</select>

JavaScript

var allsuboptions = $('#sub-category option').remove();
var selectedOptions = allsuboptions.filter(function () {
    if ($(this).is(":selected")) { console.log("Selected value = " + $(this).val()) };
    return $(this).data('parentid').toString() === $('#category').val().toString();
    
});
selectedOptions.appendTo('#sub-category');