JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<select name="user_type" id="user_type">
    <option value="">Please Choose An Option</option>
    <option value="PRIVATE OWNER">PRIVATE OWNER</option>
    <option value="TRADER">TRADER</option>
</select>

<select name="package_type" id="package_type">
    <option value="">Please Choose An Option</option>
    <option value="SINGLE ENTRY">SINGLE ENTRY</option>
    <option value="FEATURED ENTRY">FEATURED ENTRY</option>
    <option value="STANDARD">STANDARD</option>
    <option value="ULTIMATE">ULTIMATE</option>
</select>

JavaScript

var $popts = $('#package_type option'); // store all available options
var sel = {
    "default": $popts.eq(0), 
    "PRIVATE OWNER": $popts.slice(1,3), // available values for PRIVATE OWNER
    "TRADER": $popts.slice(1) // available values for TRADER
};

$('#user_type').change(function(){
    // detach all options
    $('#package_type option').slideUp();
    // if value is '' then append the default - else append the correct options
    $('#package_type').append(this.value == '' ? sel['default'] : sel[this.value]);    
});