JSFiddle - React, Tailwind, and code Playground

by Zakaria Acharki

HTML

<select class="dropdown" id="dropdown">
    <option disabled="">Singapore</option>
    <option value="SIN">Singapore</option>
    <option disabled="">Australia</option>
    <option value="ADL">Adelaide</option>
    <option value="AYQ">Ayers Rock / Uluru</option>
    <option value="BNE">Brisbane</option>
    <option value="CNS">Cairns</option>
    <option value="CBR">Canberra</option>
    <option value="OOL">Gold Coast</option>
    <option value="HBA">Hobart</option>
    <option value="LST">Launceston</option>
    <option value="MEL">Melbourne</option>
    <option value="PER">Perth</option>
    <option value="MCY">Sunshine Coast</option>
    <option value="SYD">Sydney</option>
    <option disabled="">Bangladesh</option>
    <option value="DAC">Dhaka</option>
    <option disabled="">Brunei Darussalam</option>
    <option value="BWN">Bandar Seri Begawan</option>
    <option disabled="">China</option>
    <option value="CKG">Chongqing</option>
    <option value="DLC">Dalian</option>
    <option value="CAN">Guangzhou</option>
    <option value="HAK">Haikou</option>
    <option value="HGH">Hangzhou</option>
    <option value="HRB">Harbin</option>
    <option value="TNA">Jinan</option>
    <option value="NKG">Nanjing</option>
    <option value="NNG">Nanning</option>
    <option value="NGB">Ningbo</option>
    <option value="TAO">Qingdao</option>
    <option value="JJN">Quanzhou</option>
    <option value="SHE">Shenyang</option>
    <option value="SZX">Shenzhen</option>
    <option value="TSN">Tianjin</option>
    <option value="WUX">Wuxi/Suzhou</option>
    <option value="XIY">Xi'an</option>
    <option value="CGO">Zhengzhou</option>
</select>

JavaScript

//Hide all
$('#dropdown option').hide(); 

//Get the target
var australia = $('#dropdown').find('option:contains("Australia")');

//Select the targeted country & Show all the cities until the next country
australia.attr('selected','selected').show().nextUntil("option[disabled]" ).show();