La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8">
<title> Insertar título aquí </title>
<script type = "text/javaScript">
// Inicializar una matriz 2D para almacenar el elemento de la lista de la ciudad
Ciudades var = [
["Anqing", "Hefei", "Tongcheng"],
["Shijiazhuang", "Baoding", "Tangshan"],
["Zhengzhou", "Luoyang", "Kaifeng"]
];
// Al seleccionar una provincia, llame al método para agregar una ciudad
función provinceChanged (SEL) {
// alerta ("longitud de selección"+sel.options.length);
// SEL es en realidad un objeto seleccionado
// Transferir la colección de opciones y encontrar las opciones seleccionadas
para (var x = 0; x <sel.options.length; x ++)
{
var opt = sel.options [x];
if (opt.selected)
{
// Agregar una opción a la ciudad seleccionada
addCityToselect (x)
}
}
}
// Agregar el artículo de la ciudad bajo la provincia seleccionada a la Ciudad Seleccionar
función addCityToSelect (x) {
// Encuentra la ciudad correspondiente de la matriz bidimensional
var ciudad = ciudades [x-1];
var cityselect = document.getElementById ("select_city");
/*=========================== Elementos de eliminación que ya existen en el nodo ============================================================= ============================================================= ============================================================= ============================================================= ============================================================= ============================================================= ============================================================= =============================================================
Cuando el método se llama la segunda o nta vez, el nodo agregado previamente se ha agregado al objeto Select City, por lo que se borra.
Idea 1: seleccione RemoVeChild () del objeto Seleccionar, para que el nodo de la palabra se pueda eliminar a través del recorrido de bucle.
Idea 2: set select.options.length = 1 directamente para lograr el mismo efecto.
*/
// Establezca la longitud de las opciones debajo del objeto seleccionado de la ciudad a 1
CitySelect.options.length = 1;
// Establecer la longitud de la colección de opciones y eliminarla
//cityselect.options.length=1;
para (var x = 0; x <city.length; x ++)
{
// Crear objeto de nodo de elemento
var optionName = document.createElement ("opción");
// Establecer el contenido de visualización para la opción
OppectionName.innerhtml = City [x];
// Agregar la opción creada para seleccionar
CitySelect.AppendChild (OppectionName);
/*
En este lugar, agregue todas las ciudades bajo cierta provincia al objeto de selección de la ciudad
Cuando se seleccione la segunda provincia por segunda vez, todas las ciudades debajo de la segunda provincia se agregarán a
Bajo el nodo CitySelect. Este efecto es incorrecto. Entonces, antes de cada adición,
Borre el contenido debajo del nodo CitySelect. Siguiente mirada:
=========================== Elementos de eliminación que ya existen en el nodo =================
*/
}
}
</script>
</ablo>
<Body>
<select onchange = "provinceChanged (this);">
<!-El significado de esto: se refiere al objeto seleccionado llamando a ProvinceChanged (esto), y en este método
Pase el objeto en sí como un parámetro para operar en él. ->
<Opción> Seleccione Provincia </opción>
<Cection> anhui </ppection>
<Cection> Hebei </ppection>
<Cection> henan </ppection>
</select>
<select id = "select_city">
<Opción> Seleccione City </opción>
</select>
</body>
</html>