Ausführliche Erläuterung der Schritte zur Implementierung der Dropdown-Box-Verknüpfung mit JS-js-Tutorial-php.cn

Ausführliche Erläuterung der Schritte zur Implementierung der Dropdown-Box-Verknüpfung mit JS

php中世界最好的语言

Freigeben： 2018-05-22 10:29:13

Original

2116 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Implementieren der Dropdown-Box-Verknüpfung mit JS geben. Was sind die Vorsichtsmaßnahmen für JS, um die Dropdown-Box-Verknüpfung zu implementieren? , lass uns einen Blick darauf werfen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>one</option><option>two</option>";
  }else{
    var sec = document.getElementById('second');
    sec.innerHTML = "<option>一</option><option>二</option>";
  }
}
</script>
</head>
<body>
<p>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</p>
<p>
  <select id="second">
  </select>
</p>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie innerHTML, IE-Browser unterstützt diese Methode nicht, daher kann die Verbesserungsmethode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS下拉联动</title>
<script>
function setSecond(obj){
  var val = obj.value;
  if(val == 'en'){
    var sec = document.getElementById('second');
    sec.options[0] = new Option("one","one");
    sec.options[1] = new Option("two","two");
  }else{
    var sec = document.getElementById('second');
    sec.options[0] = new Option("一","one");
    sec.options[1] = new Option("二","two");//可设置循环配置，也可一个一个配置
  }
}
</script>
</head>
<body>
<p>
  <select id="first" onchange="setSecond(this)">
    <option value="en">en</option>
    <option value="zh">zh</option>
  </select>
</p>
<p>
  <select id="second">
  </select>
</p>
</body>
</html>

Nach dem Login kopieren

mit Firefox, IE, usw.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Fallanalyse für den Zugriff auf den lokalen Server von NodeJs

$emit und $on Eltern-Kind-Geschwister Komponenten in Vue Detaillierte Erläuterung der Bedienung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zur Implementierung der Dropdown-Box-Verknüpfung mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!