How to change HTML element without ID using Javascript?

Question

I have a list with 250 countries in a HTML dropdown(for the sake of space I've only included 5 below):

<select name="postalCountry" class="valid">
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="AK">Alaska</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>

Unfortunately I cannot edit the HTML element themselves, so I was wondering if there is a way to hide all of them except for Alaska (value=AK) using Javascript?

I currently have the following:

var country = document.querySelectorAll('select[name="postalCountry"] option');
var e;

for (e = 0; e < country.length; e++){
country[e].style.display = 'none';
}

country[2].style.display = 'initial';

But that gets a bit messy since I would have to go through a lot of countries to find out the index number of a country at the end of the list.

Any suggestion is greatly appreciated !

That's the correct way to do it, unless you want to get fancy with map, which on a list that small won't make much of a difference in performance anyway. — Federico klez Culloca
– Federico klez Culloca, Commented Jan 10, 2018 at 16:34
You can not hide <option> in some browsers notably IE. You have to remove or disable — charlietfl
– charlietfl, Commented Jan 10, 2018 at 16:36
You can use jQuery. api.jquery.com/attribute-not-equal-selector — Tibs
– Tibs, Commented Jan 10, 2018 at 16:39
@FedericoklezCulloca There's no array where you could call .map() on. And why a method to translate every element into another one if the purpose is to only change one attribute of the elements? — Andreas
– Andreas, Commented Jan 10, 2018 at 16:40

mdatsev · Accepted Answer · 2018-01-10 16:40:51Z

1

If you are only going to style them it's better to just use CSS:

select[name="postalCountry"] option
{
  display: none;
}

select[name="postalCountry"] option[value="AK"] 
{
  display: initial;
}

<select name="postalCountry" class="valid">
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="AK" selected>Alaska</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option

Edit: added selected attribute so "Alaska" is selected by default initially.

edited Jan 10, 2018 at 16:40

answered Jan 10, 2018 at 16:37

mdatsev

3,9193 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

epascarello Over a year ago

And your answer shows the value as Afghanistan :) so needs one more thing.

Maxwell s.c Over a year ago

I Was going to add this answer XD

mdatsev Over a year ago

Yep I added selected attr so Alaska is selected :)

score 0 · Accepted Answer · 2018-01-10 17:44:41Z

0

Perhaps you can use the "value" of each option like follows

var country = document.querySelectorAll('select[name="postalCountry"] option');
for (var e = 0; e < country.length; e++){    	
  if(country[e].value == "AK"){
	  country[e].style.display = 'initial';      
    document.getElementById("country_select").value = country[e].value;
  } else {
  	country[e].style.display = 'none';
  }	
}

<select name="postalCountry" id="country_select" class="valid">
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="AK">Alaska</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
</select>

edited Jan 10, 2018 at 17:44

answered Jan 10, 2018 at 16:38

user4490801

Comments

Rick Hitchcock · Accepted Answer · 2018-01-10 16:57:07Z

Use JavaScript to make Alaska the first element of the select element, and set the select's value to "AK":

var sel = document.querySelector('select[name="postalCountry"]');
    optAK = document.querySelector('option[value="AK"]');

sel.prepend(optAK);
sel.value = 'AK';

In CSS, hide all but the first option:

select[name="postalCountry"] option:not(:first-child) {
  display: none;
}

That will overcome a bug in Chrome which shows the first option even if it's hidden.

Snippet:

var sel = document.querySelector('select[name="postalCountry"]');
    optAK = document.querySelector('option[value="AK"]');

sel.prepend(optAK);
sel.value = 'AK';

select[name="postalCountry"] option:not(:first-child) {
  display: none;
}

<select name="postalCountry" class="valid">
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="AK">Alaska</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
</select>

Erick Petrucelli · Accepted Answer · 2018-01-10 18:56:14Z

Before we start: the aceppted answer is right and works well.

Here's an alternative approach showing the use of ES2015 spread operator (...) to iterate through a NodeList as an Array. This way we can use find method to target the right <option> without the use of formal loops and conditions.

Remeber that it only works in browsers that supports the spread operator (anything but IE). Also, note that it's a kind of syntax sugar which can be considered better or worst based on personal preferences but being a little slower than the traditional iterational approach, so use with sense.

let options = [...document.querySelectorAll('#country_select option')]
options.forEach(e => e.style.display = 'none')

let selected = options.find(e => e.value === 'AK')
selected.style.display = 'initial'
selected.selected = true

<select id="country_select">
  <option value="AF">Afghanistan</option>
  <option value="AX">Aland Islands</option>
  <option value="AK">Alaska</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
</select>

Collectives™ on Stack Overflow

How to change HTML element without ID using Javascript?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related