Hide Dropdown Options

Hide Dropdown Options

by Han Myo Htwe

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>
    <option disabled="">Greece</option>
    <option value="ATH">Athens</option>
    <option disabled="">Hong Kong</option>
    <option value="HKG">Hong Kong</option>
    <option disabled="">India</option>
    <option value="ATQ">Amritsar</option>
    <option value="BLR">Bangalore</option>
    <option value="MAA">Chennai</option>
    <option...

JavaScript

//var country = $('option').filter(function () { return $(this).html() == "Malaysia"; });
//var ifrom = country.index();
//var ito = country.nextAll("[disabled]").first().prev().index();


//$("option").filter(function() { 
//    return $(this).index() < ifrom || $(this).index() > ito 
//}).hide();

//country.attr('selected', true);

var countries = {};
var curr;

function showCities(selectedCountry) {
    var h = '';
  $.each(countries[selectedCountry], function(i, c) {
    h += '<option value="' + c.value + '">' + c.name + '</option>';
  });
  $('#dropdown').html(h);
}

$(document).ready(function() {
    $('#dropdown option').each(function(i) {
    if($(this)[0].hasAttribute("disabled")) {
        countries[$(this).text()] = [];
      curr = $(this).text();
    } else {
        countries[curr].push({
        value: $(this).val(),
        name: $(this).text()
      });
    }
  });
    showCities('Australia');
});