Maison > Article > interface Web > Comment utiliser JS pour réaliser une liaison avec des listes déroulantes
Comment utiliser JS pour réaliser une liaison avec des listes déroulantes
- php中世界最好的语言original
- 2018-05-30 11:13:291750parcourir
Cette fois, je vais vous montrer comment utiliser JS pour réaliser une liaison de liste déroulante. Quelles sont les précautions pour utiliser JS pour réaliser une liaison de liste déroulante. Voici un cas pratique, prenons. un regard.
<!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>
Utilisez innerHTML, Le navigateur IE ne prend pas en charge cette méthode, donc la méthode d'amélioration :
<!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>
Je pense que vous la maîtrisez après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !
Lecture recommandée :
Comment utiliser la balise Jade du moteur de modèles front-end de nœud
Comment développer Vue Drag et déposez les composants
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!