На ежедневной стадии разработки проекта часто наблюдается эффект сцепления второго уровня в раскрывающемся ящике, особенно когда существует несколько вариантов, включающих регионы, разновидности и т. Д. Например: раскрывающаяся раскрывающаяся коробка провинции и муниципальная связь изменится при выборе провинции.
Идеи:
1. Так называемый эффект сцепления указывает, что когда данные изменения на родительском уровне будут влиять на изменения связанных элементов данных уровня ребенка.
Ниже приведены данные провинций и городов, которые были построены:
var linkdatas = {provinces: [{"code": "0", "name": "пожалуйста Выберите «}, {" Код ":" 1 "," Имя ":" Пекин "}, {" Код ":" 2 "," Имя ":" tianjin "}, {" Code ":" 3 "," "Имя ":" Hebei "}, {" code ":" 4 "," name ":" hubei "}, {" code ":" 5 "," name ":" guangdong "}, {" code ":" 6 "," Na Я ":" Другой "}], Сити: {0: [" Пожалуйста, выберите "], 1: [" Район Чаоян "," Район Хаидиан "," Район Донгчэн ",« Район Ссиченг »,« Фаншан Район "," Другой "], 2: [" tianjin "], 3: [" cangzhou "," shijiazhuang "," Qinhuangdao "," Другой "], 4: [" Вухан -Сити ", Город Йичанг", "Сити -Сити", "Другое"], 5: ["Гуангж", "Шенжан", ". Город "," Фошан -Сити "," Город Чжухай "," Другой "], 6: [" Другое "]}};2. Динамически генерировать узлы опций на основе данных:
Функция AddOptions (target, options) {var optionele = null, target = target, option = option, optionlen = options.length; for (var i = 0; i <optionlen; i ++) {optionele = document.createElement ('option'); optionele.value = option [i] .value; optionele.text =.3. Согласно вышеупомянутым провинциальным и муниципальным данным, код представляет идентификатор, который указывает на «уровень провинции», и когда данные провинции изменяются, событие изменения начинается:
pro.onchange = function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*Добавить город*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]});} Addoptions (c, ctbox);}HTML -код:
<div> <h3> Эффект сцепления на стягивании вниз </h3> <p> Провинция: <select name = "Провинции" id = "провинции"> </select> </p> <p> City: <select name = "city" id = "citys"> </select> </p> </div>
Весь код JavaScript:
var linkdatas = {provinces: [{"code": "0", "name": "пожалуйста Выберите "}, {" code ":" 1 "," name ":" feijing "}, {" code ":" 2 "," name ":" tianjin "}, {" code ":" 3 "," name ": "Hebei"}, {"code": "4", "name": "hubei"}, {"code": "5", "name": "guangdong"}, {"code": "6", "name": «Другое»}], Citys: {0: [«Пожалуйста, выберите»], 1: [«Район Чаоян», «Хайдианский район», «Район Донгчэн», «Район Сиченг», «Фаншан Район "," Другой "], 2: [" tianjin "], 3: [" cangzhou "," shijiazhuang "," Qinhuangdao "," Другой "], 4: [" Вухан -Сити ", Город Йичанг", "Сити -Сити", "Другое"], 5: ["Гуангж", "Шенжан", ". Город "," Фошан -Сити "," Чжухай Сити "," Другой "], 6: [" Другое "]}}; Функция Addoptions (Target, Options) {var optionele = null, target = target, option = optionlen = options.length; for (var i = 0; i <optionlen; i ++) {optionlen = document опция [i] .value; optionele.text = option [i] .text; target.options.add (optionele);}} function provincescsityslink (pro, c) {var ld = linkdatas, provinces = ld.provinces, city = ld.citys, initcity = city [0], province = [/**Добавить провинс*/for (var i = 0; provinces.length; i ++) {probox.push ({"text": provinces [i] .name, "value": provinces [i] .code})} Addoptions (Pro, probox);/*Инициализируют город*/Addoptions (c, [{"text": initcity ": intecial function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*Добавить город*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({"text": ct [j], "value": ct [j]});} добавки (c, ctbox);}} var provinces = document.getelementbyid ('provinces'), citys = words = words = wordys = words = words = words = words = words = words = words = words = words = words = words = words = word Document.getElementById ('Citys'); ProvincescestSlink (провинции, города);