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

Question

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

不幸的是，我不能自己编辑 HTML 元素，所以我想知道是否有办法使用 Javascript 隐藏除阿拉斯加 (value=AK) 之外的所有元素？

我目前有以下内容:

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

但这有点麻烦，因为我必须遍历很多国家才能找出列表末尾国家的索引号。

非常感谢任何建议!

Answer 1

如果您只想设置样式，最好只使用 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

编辑:添加了 selected 属性，因此最初默认选择“Alaska”。