JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<h1>Immediate</h1>
<select id="category-1">
    <option value='1'>Categroy 1</option>
    <option value='2'>Categroy 2</option>
    <option value='3'>Categroy 3</option>
</select>
<select id="sub-category-1">
    <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>

<h1>Deferred</h1>
<select id="category-2">
    <option value='1'>Categroy 1</option>
    <option value='2'>Categroy 2</option>
    <option value='3'>Categroy 3</option>
</select>
<select id="sub-category-2">
    <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

// original example except items are removed in a loop
var allsuboptions = $('#sub-category-1 option').each(function() {
    $(this).remove();
});
var selectedOptions = allsuboptions.filter(function() {
    return $(this).data('parentid').toString() === $('#category-1').val().toString();
});
selectedOptions.appendTo('#sub-category-1');
// original example except items are removed in a loop
// and the select element is forced to refresh every time an item is removed
var allsuboptions = $('#sub-category-2 option').each(function() {
    $(this).remove();
    var variable_not_used = $('#sub-category-2').prop('selectedIndex');
});
var selectedOptions = allsuboptions.filter(function() {
    return $(this).data('parentid').toString() === $('#category-2').val().toString();
});
selectedOptions.appendTo('#sub-category-2');