Простой код реализации для эффектов провинции и муниципальной связи (рекомендуется)

Эффект сцепления второго уровня в раскрывающемся поле часто встречается в ежедневных сценариях применения, особенно когда существует несколько вариантов с участием регионов, разновидностей и т. Д. Например: общая провинциальная и муниципальная раскрывающаяся коробка связи, при выборе провинции, список города также изменится с изменениями.

Идеи:

1. Так называемый эффект сцепления указывает, что когда данные изменения на родительском уровне будут влиять на изменения связанных элементов данных уровня ребенка.

Ниже приведены данные провинций и городов, которые были построены:

 var linkdatas = {provinces: [{"code": "0", "name": "Пожалуйста, выберите"}, {"code": "1", "name": "beijing"}, {"код": "2", "name": "tianjin"}, {"код": "3": ":", ",", ",", ":", ",": ",", ",", ",", ",", ",": ",": "." "name":"Hubei" }, { "code":"5", "name":"Guangdong" }, { "code":"6", "name":"Other" } ], cities:{ 0:[ "Please select" ], 1:[ "Chaoyang District", "Haidian District", "Dongcheng District", "Xicheng District", "Fangshan District", "Other" ], 2:[ "Tianjin" ], 3:[ "Cangzhou", "Shijiazhuang", "Qinhuangdao", "Other" ], 4:[ "Wuhan City", "Yichang City", "Xiangfan City", "Other" ], 5:[ "Guangzhou City", "Shenzhen City", "Shantou City", "Foshan City", «Город Чжухай», «Другой»], 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 = Option [i] .Text; target.options.add (опция); }}

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 = "provinces" id = "провинции"> </select> </p> <p> City: <select name = "city" id = "citys"> </select> </p> </div>

Весь код JavaScript:

 var linkdatas = {provinces: [{"code": "0", "name": "Пожалуйста, выберите"}, {"code": "1", "name": "beijing"}, {"код": "2", "name": "tianjin"}, {"код": "3": ":", ",", ",", ":", ",": ",", ",", ",", ",", ",": ",": "." "name":"Hubei" }, { "code":"5", "name":"Guangdong" }, { "code":"6", "name":"Other" } ], cities:{ 0:[ "Please select" ], 1:[ "Chaoyang District", "Haidian District", "Dongcheng District", "Xicheng District", "Fangshan District", "Other" ], 2:[ "Tianjin" ], 3:[ "Cangzhou", "Shijiazhuang", "Qinhuangdao", "Other" ], 4:[ "Wuhan City", "Yichang City", "Xiangfan City", "Other" ], 5:[ "Guangzhou City", "Shenzhen City", "Shantou City", "Foshan City", «Город Чжухай», «Другой»], 6: ["Другое"]}}; Функция 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 = Option [i] .Text; target.options.add (опция); }} function provincescitySlink (pro, c) {var ld = linkdatas, provinces = ld.provinces, city = ld.citys, initcity = city [0], probox = []; /*Добавить провинцию*/ for (var i = 0; i <provinces.length; i ++) {probox.push ({"text": provinces [i] .name, "value": provinces [i] .code})} Addoptions (pro, proxox); /*Инициализировать город*/ AddoPtions (c, [{"text": initCity, "value": initCity}]); /*Добавить событие сцепления*/ 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); }} var provinces = document.getElementById ('провинции'), Cities = document.getElementById ('CityS'); ProvincescsitySlink (провинции, города);

Приведенный выше простой код реализации (рекомендуется) эффекта провинциальной и муниципальной связи - это все контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.