La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title> Insérer le titre ici </TITME>
<script type = "text / javascript">
// Initialisez un tableau 2D pour stocker l'article de la liste de la ville
var villes = [
["Anqing", "hefei", "tongcheng"],
["Shijiazhuang", "baoding", "tangshan"],
["Zhengzhou", "Luoyang", "Kaifeng"]
]]
// Lors de la sélection d'une province, appelez la méthode pour ajouter une ville
fonction provinceChanged (sel) {
// alert ("SELECT'S LONGUE" + sel.options.length);
// Sel est en fait un objet sélectionné
// Transférer la collection d'options et trouver les options sélectionnées
pour (var x = 0; x <sel.options.length; x ++)
{
var opt = sel.options [x];
if (opt.selected)
{
// Ajouter une option à la ville sélectionnée
addCityToselecl (x)
}
}
}
// Ajouter l'article de la ville sous la province sélectionnée au Select de la ville
fonction addCityToselelect (x) {
// Trouvez la ville correspondante du tableau bidimensionnel
var ville = villes [x-1];
var cityselect = document.getElementById ("select_city");
/ * =========================== Supprimer des éléments qui existent déjà dans le nœud =====================================================================. =====================================================================. =====================================================================. =====================================================================. =====================================================================. =====================================================================. =====================================================================. =====================================================================.
Lorsque la méthode est appelée la deuxième ou la nème nième, le nœud précédemment ajouté a été ajouté à l'objet City Select, il est donc effacé.
Idée 1: Sélectionnez le RemoveChild () de l'objet Select, afin que le nœud de mot peut être supprimé via la traversée de boucle.
Idée 2: Définissez Select.options.length = 1 directement pour obtenir le même effet.
* /
// Définissez la longueur des options sous l'objet sélectionné de la ville à 1
CitySelect.options.length = 1;
// Définissez la longueur de la collection d'options et supprimez-la
//CitySelect.options.length=1;
pour (var x = 0; x <city.length; x ++)
{
// Créer un objet de nœud d'élément
var optionName = document.CreateElement ("Option");
// Définissez l'option Contenu afficher le contenu
optionName.innerHtml = ville [x];
// Ajouter l'option créée pour sélectionner
CitySelect.ApendChild (OptionName);
/ *
Dans cet endroit, ajoutez toutes les villes d'une certaine province à l'objet CitySelect
Lorsque la deuxième province est sélectionnée pour la deuxième fois, toutes les villes en dessous de la deuxième province seront ajoutées à
Sous le nœud CitySelect. Cet effet est faux. Donc, avant chaque ajout,
Effacez le contenu sous le nœud CitySelect. Suivant regard:
========================== Suppression des éléments qui existent déjà dans le nœud ===============.
* /
}
}
</cript>
</ head>
<body>
<select onchange = "provinceChanged (this);">
<! - La signification de ceci: fait référence à l'objet sélectionné Calling ProvinceChanged (ceci), et dans cette méthode
Passez l'objet lui-même en tant que paramètre pour opérer dessus. ->
<Option> Veuillez sélectionner la province </ option>
<Option> anhui </opoption>
<Option> Hebei </ Option>
<Option> Henan </ Option>
</lect>
<select id = "select_city">
<option> Veuillez sélectionner la ville </opoption>
</lect>
</docy>
</html>