매일 프로젝트 개발 단계에서 드롭 다운 박스의 두 번째 수준의 연결 효과가 종종 보입니다. 특히 지역, 품종 등과 관련된 여러 옵션이있을 때 : 공통 지방 및 시립 연계 드롭 다운 박스는 지방을 선택할 때 더 많이 변경됩니다.
아이디어 :
1. 소위 연계 효과는 부모 수준에서 데이터가 변경 될 때 관련 아동 레벨 데이터 요소의 변화에 영향을 미친다는 것을 지적합니다.
다음은 건축 된 지방과 도시의 데이터입니다.
var linkdatas = {지방 : [{ "code": "0", "name": "제발 "}, {"code ":"1 ","name ":"Beijing "}, {"code ":"2 ","name ":"tianjin "}, {"code ":"3 ","name을 선택하십시오 ":"Hebei "}, {"code ":"4 ","name ":"hubei "}, {"code ":"5 ","name ":"Guangdong "}, {"code ":"6 ","na Me ":"Other "}], Citys : {0 : ["Please "], 1 : ["Chaoyang District ","Haidian District ","Dongcheng District ","Xicheng District ","Fangshan 지구 ","기타 "], 2 : ["Tianjin "], 3 : ["Cangzhou ","Shijiazhuang ","Qinhuangdao ","Other "], 4 : ["Wuhan City ","Yichang City ","Xifan City ","Other "], 5 : ["Shenzhou City " City ","Foshan City ","Zhuhai City ","Other "], 6 : ["Other "]}};2. 데이터를 기반으로 옵션 노드를 동적으로 생성합니다.
함수 부가 (대상, 옵션) {var optionele = null, target = 옵션 = 옵션 = 옵션, 옵션 len = 옵션.length; for (var i = 0; i <옵션 렌; i ++) {옵션 ele = oxecreeLement ( '옵션'); 옵션 value = 옵션 [i] .Value; 옵션 셀렉트 = 옵션. 옵션 [i] .text; target.options.add (옵션);}}3. 위에서 언급 한 지방 및 지방 자치 단체에 따르면, 코드는 "지방 수준"을 가리키는 식별자를 나타냅니다. 그리고 지방 데이터가 변경되면 변경 이벤트가 시작됩니다.
pro.onchange = function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*City add City*/ for (var j = 0;HTML 코드 :
<div> <h3> 박스 연결 효과 </h3> <p> 지방 : <select name = "provinces"id = "provinces"> </select> </p> <p> 도시 : <select name = "city"id = "Citys"> </select> </p> </div>
모든 JavaScript 코드 :
var linkdatas = {지방 : [{ "code": "0", "name": "제발 "}, {"code ":"1 ","name ":"Beijing "}, {"code ":"2 ","name ":"tianjin "}, {"code ":"3 ","name "을 선택하십시오. "hebei"}, { "code": "4", "name": "hubei"}, { "code": "5", "name": "Guangdong"}, { "code": "6", "name": "기타"}], Citys : {0 : [ "Please"], 1 : [ "Chaoyang District", "Haidian District", "Dongcheng District", "Xicheng District", "Fangshan 지구 ","기타 "], 2 : ["Tianjin "], 3 : ["Cangzhou ","Shijiazhuang ","Qinhuangdao ","Other "], 4 : ["Wuhan City ","Yichang City ","Xifan City ","Other "], 5 : ["Shenzhou City " City ","Foshan City ","Zhuhai City ","Other "], 6 : ["Other "]}}; 함수 부가 (Target, Options) {var Optionele = null, target = target, 옵션 = 옵션, 옵션 = 옵션. 옵션 [i] .value; 옵션 elext = 옵션 [i] .text; target.options.add (optionele);}} 함수 ProvincescitySlink (pro, c) {var ld = linkdatas, provinces = ld.provinces, city = ld.citys, initcity = city [0], probox = []; Provinces.length; i ++) {probox.push ({ "text": 지방 [i] .name, "value": 지방 [i] .code})} addoptions (pro, probox);/*초기화*/addOptions (c, [{intext ": value": initcity}); function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; c.innerhtml = ""; /*City add City*/ for (var j = 0; j <ctlen; j ++) {ctbox.push ({ "text": ct [j], "value": ct [j]});} addOptions (c, ctbox);}} var provinces = document.getElementById ( 'Provent'), City = Document.GetElementById ( 'Citys'); ProvincescitySlink (지방, 도시);