How can I hide some options from dropdown list

Question

I would like to display only Australia's cities in dropdown list. How can I able to do it? I trying to find "Australia" in option and hide before it and after it. but failed!

My fiddle.

<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>

What have you tried? please show us – Carsten Løvbo Andersen Oct 02 '17 at 09:04 — Carsten Løvbo Andersen, Oct 02 '17 at 09:04
Have a look at: https://stackoverflow.com/a/3744323/2181514 – freedomn-m Oct 02 '17 at 09:17 — freedomn-m, Oct 02 '17 at 09:17

Reece Kenney · Answer 1 · 2017-10-02T14:56:00.427

0

If you know the value of the options you want to keep you could loop over the options and hide them if they don't have this value:

var select = $("#dropdown");

for (var i = 0; i < select .length; i++){
   if (select.options[i].value != 'YOURVALUE' )
       select.css("display":"none");
}

Replace YOURVALUE with the values of the options you want to keep i.e. the value that cities in Australia have.

edited Oct 02 '17 at 14:56

answered Oct 02 '17 at 09:05

Reece Kenney

2,734
3
24
57

score 0 · Answer 2 · answered Oct 02 '17 at 09:16

0

To hide the value in dropdown list, use

<option value="TNA" style="display:none;">Jinan</option>

answered Oct 02 '17 at 09:16

Silentexpert

31
4

Zakaria Acharki · Answer 3 · 2017-10-02T10:08:55.827

Working fiddle.

Since you're using jQuery you could use nextUntil() to select all the options from Australia until the next country like :

//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();

Hope this helps.

$('#dropdown option').hide(); 
var australia = $('#dropdown').find('option:contains("Australia")');
australia.attr('selected','selected').show().nextUntil( "option[disabled]" ).show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Thanks, however, what i really want to show in dorpdown is those values; not only 'Australia'. sorry about confusion. Australia, Adelaide, Ayers Rock / Uluru ... Sydney. — IT-KOKO, Oct 02 '17 at 09:21

score 0 · Answer 4 · answered Oct 02 '17 at 09:25

display only Australia's cities

Assuming your list contains the country (disabled option) followed directly by its cities followed by another disabled option:

Use this answer to find the Australia option:

var aus = $('option').filter(function () { return $(this).html() == "Australia"; });

then use .nextAll to find the next disabled option and get the option before that using prev() and .index() on both of them.

then hide entries that don't match that index range

finally, tidy up by selecting the first option

aus.attr('selected', true);

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

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

aus.attr('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="popup_origin_select" class="origin-select-shared" id="popup_origin_select_return">
    <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>

Thanks, This help a lot, but, for 'China', i got error. Nothing shown. — IT-KOKO, Oct 02 '17 at 09:29
China is the last country entry, so you'll need to handle that by checking if `nextAll("[disabled]")` returns a value. — freedomn-m, Oct 02 '17 at 09:39

score 0 · Answer 5 · edited Oct 02 '17 at 10:37

0

$(document).ready(function(){
    var australiaCities=[] // Array of Australia cities 
    $("#dropdown option").each(function(){
        if(australiaCities.indexOf($(this).val())==-1){
            $(this).hide();
        }// check if this option value is not in autraliaCities so hide this option 
    )};
)};

edited Oct 02 '17 at 10:37

waka

3,362
9
35
54

answered Oct 02 '17 at 09:31

Osama

2,912
1
12
15

delinear · Answer 6 · 2017-10-02T14:19:11.183

Personally I'd put all of the cities into an object, keyed by country - you'll find it much easier to manipulate an object than having all your data stored as HTML elements. For instance, here you just pass the country name to a function and it pulls the data out of the stored object and inserts to your :

var countries = {};
var curr;

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

$(document).ready(function() {
    $('#popup_origin_select_return 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('China');
});

https://jsfiddle.net/uo31jjjn/5/

Well, the original question said to display just the cities, no mention of the country, but that's very easy as well, just need to replace the var h declaration with `var h = '';` and this should then include the country at the top of the list. I have updated the code in my answer, take a look :) — delinear, Oct 02 '17 at 14:21

David Studeny · Answer 7 · 2017-10-02T10:56:47.343

You could use HTML5's custom data-* attribute. That is you add to all options
data-country="some country" and iterate through that with for example jQuery:

var isolated = "australia";
$("option").each(function(){
    var opt = $(this);
    if(opt.attr("data-country")!==isolated){
        opt.hide();
    }
});

(I hope the syntax is somewhat OK)

data-* attribute documentation

EDIT:
Another solution comes to mind is to use optgroup.
Your select would look like this:

<select class="dropdown" id="dropdown">
    <optgroup label="Australia">
        <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>
    </optgroup>
    .
    .
    .
</select>

But that's not much of a difference and you can't use hidden on it, only disabled.

How can I hide some options from dropdown list

7 Answers7