Question

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

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

你可以这样做吗？我试过但显然不起作用。

Answer 1

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

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

Answer 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);
  }
}

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

2 个答案: