suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der Schritte zur Implementierung der Dropdown-Box-Verknüpfung mit JS

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

php中世界最好的语言
php中世界最好的语言Original
2018-05-22 10:29:132129Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Grundkenntnisse über HTTP-Nachrichten und AjaxNächster Artikel：Grundkenntnisse über HTTP-Nachrichten und Ajax

In Verbindung stehende Artikel

Mehr sehen