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隐藏除Alaska（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：

＆＃13;

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

＆＃13;

<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

＆＃13;

修改：添加了selected属性，以及＃34;阿拉斯加＆＃34;默认情况下最初选择。

Answer 2

也许你可以使用＆＃34;值＆＃34;每个选项如下

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用JavaScript将Alaska作为select元素的第一个元素，并将select的值设置为＆＃34; AK＆＃34;：

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

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

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

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

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

<强>段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在我们开始之前：受到肯定的答案是对的，效果很好。

这是一种替代方法，展示了使用ES2015 spread operator（...）来迭代NodeList作为Array。通过这种方式，我们可以使用find方法来定位正确的<option>，而无需使用正式的循环和条件。

记住它只适用于browsers that supports the spread operator（IE以外的任何东西）。另外，请注意，它是一种语法糖，可以根据个人喜好被认为是更好或更差，但比传统的迭代方法更a little slower，所以请使用感觉。

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: