通过单击另一个选择框将元素添加到选择框 - Javascript答案

【问题标题】：Add elements to select box by clicking on another selectbox - Javascript通过单击另一个选择框将元素添加到选择框 - Javascript
【发布时间】：2014-02-23 19:43:05
【问题描述】：

<html>
<head>
<title> Regioni </title>
</head>
<body>
<label>Selezione una regione</label>
<select name="regioni" id = "reg" name = "reg">
<option value="Abruzzo"> Abruzzo  </option>
<option value="Basilicata"> Basilicata </option><onClick="Basilicata(regione)">
<option value="Calabria"> Calabria </option>
<option value="Campania"> Campania </option>
<option value="Emilia-Romagna"> Emilia-Romagna </option>
<option value="Friuli-Venezia Giulia"> Friuli-Venezia Giulia </option>
<option value="Lazio" id ="lazio" onclick="Ch"> Lazio </option>
</select>
<br>
<label>Province</label> 
<select style="width:200" id="opt" name ="province">Province</select>
<script>                       
function Ch() 
{
var ddl = document.getElementById("reg");
var selectedValue = ddl.options[ddl.selectedIndex].value; 
if(selectedValue == "Lazio")
{  
var select = document.getElementById("opt");
select.options[select.options.length] = new Option('Roma', 'Viterbo'); 
}
else
{
alert('seleziona una provincia!');
}
} 
</script>
</body>
</html>

如果我点击拉齐奥，我希望在第二个选择框中显示拉齐奥地区的省份。

你能做到吗？我试过了，但显然不起作用。

【问题讨论】：

标签： javascript drop-down-menu add items

【解决方案1】：

需要在select元素上使用onchange事件；

<select name="regioni" id = "reg" name = "reg" onchange="ch();">

【讨论】：

它有效，只是它只增加了一个价值。添加罗马和维泰博跳过它并没有。怎么样？
我不确定你的意思.. 代码：select.options[select.options.length] = new Option('Roma', 'Viterbo');将添加一个带有文本 Roma 但值为 Viterbo 的选项。

【解决方案2】：

只有一个补充回答。为方便起见，并避免过多的 if/else 块，您可以制作一个数组对象，并相应地填充选择框的内容：

function Ch() {
  var opts = {
    'Lazio': ['Roma', 'Viterbo'], // add all arrays with provinzes here
    'Calabria': ['something1', 'something2']
  };
  var ddl = document.getElementById("reg");
  var selectedValue = ddl.options[ddl.selectedIndex].value;
  var select = document.getElementById("opt");
  select.innerHTML = '';
  for (i = 0; i < opts[selectedValue].length; i++) {
    var opt = document.createElement('option');
    opt.value = opts[selectedValue][i];
    opt.innerHTML = opts[selectedValue][i];
    select.appendChild(opt);
  }
}

【讨论】：

太棒了：）它的功能！