JSFiddle - React, Tailwind, and code Playground
HTML
<SELECT class="input_style" name="comp_dd" id="comp_dd">
<option value="0">[Select]</option>
<OPTION value="1">Company1</OPTION>
<OPTION value="2">Company2</OPTION>
<OPTION value="3">Company3</OPTION>
<OPTION value="4">Company4</OPTION>
</SELECT>
<SELECT class="input_style" name="group_dd" id="group_dd">
<option data-parent="-1" value="0">[Select]</option>
<OPTION data-parent="1,3"; value="1" >grp_f</OPTION>
<OPTION data-parent="1,2"; value="2" >grp_e</OPTION>
<OPTION data-parent="1,3,4"; value="3" >grp_t</OPTION>
</SELECT>
JavaScript
$('#comp_dd').change(function() {
var parent = $(this).val();
if (parent != 0) {
$('#group_dd').children().each(function() {
var listOfNumbers = $(this).data('parent');
if ($(this).data('parent') != '-1') {
var numbers = listOfNumbers.split(',');
if (jQuery.inArray(parent, numbers) != -1) {
$(this).show();
}
else {
alert($(this).val()+" detached");
$(this).detach();
}
}
});
}
else {
$('#group_dd').children().each(function() {
$(this).show();
});
}
});