如何使用Javascript更改没有ID的HTML元素？

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

我在HTML下拉列表中有250个国家/地区的列表(为了空间我只包括下面的5个):

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

不幸的是我无法自己编辑HTML元素,所以我想知道是否有办法使用Javascript隐藏除阿拉斯加(值= AK)以外的所有内容?

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 !

任何建议都非常感谢!

4 个解决方案

#1

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>

#2

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

如果您只是为它们设计样式,那么最好只使用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.

编辑:添加所选属性,以便最初默认选择“阿拉斯加”。

#3

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

使用JavaScript将Alaska作为select元素的第一个元素,并将select的值设置为“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:

在CSS中,隐藏除第一个选项之外的所有选项:

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.

这将克服Chrome中的一个错误,即使它被隐藏,也会显示第一个选项。

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>

#4

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.

这是一种替代方法,显示使用ES2015扩展运算符(...)作为数组迭代NodeList。这样我们就可以使用find方法来定位正确的

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.

记住它只适用于支持扩展运算符的浏览器(IE以外的任何东西)。另外,请注意,它是一种语法糖,可以根据个人喜好被认为是更好或更差,但比传统的迭代方法慢一点,所以请使用感觉。

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>

#1