드롭 다운 박스의 두 번째 수준의 연결 효과는 일일 응용 시나리오에서 종종 발생합니다. 특히 지역, 품종 등과 관련된 여러 옵션이있는 경우 : 공통 지방 및 시립 연계 드롭 다운 박스와 관련이 있습니다. 주를 선택할 때 도시 목록도 변경에 따라 더 많이 변경됩니다.
아이디어 :
1. 소위 연계 효과는 부모 수준에서 데이터가 변경 될 때 관련 아동 레벨 데이터 요소의 변화에 영향을 미친다는 것을 지적합니다.
다음은 건축 된 지방과 도시의 데이터입니다.
var linkdatas = {지방 : [{ "code": "0", "name": "plee select"}, { "code": "1", "name": "beijing"}, { "code": "2", "name": "tianjin"}, "3", "이름": "{"code "},", ":": ":"4 "} "이름": "Hube"}, { "Code": "5", "Name": "Guangdong"}, { "Code": "6", "Name": "Other"}], 도시 : {0 : [ "Please"], 1 : [ "Chaoyang", "Haidian District", "Dongcheng District", "Xicheng District" 2 : [ "Tianjin"], 3 : [ "Cangzhou", "Shijiazhuang", "Qinhuangdao", "Other"], 4 : [ "Wuhan City", "Yichang City", "Xiangfan City", "Other"], 5 : [ "Guangzhou City", "Shenzhen City", "Shosou City" "," "", "", "" "," "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""시 젠지 시티 " "Zhuhai City", "Other"], 6 : [ "기타"]}};2. 데이터를 기반으로 옵션 노드를 동적으로 생성합니다.
함수 부가 (Target, Options) {var OptionEle = null, target = target, 옵션 = 옵션, 옵션 len = 옵션 .length; for (var i = 0; i <옵션 len; i ++) {옵션 ele = document.createelement ( '옵션'); OptionEle.Value = 옵션 [i] .Value; OptionEle.text = 옵션 [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; } addOptions (c, ctbox); }HTML 코드 :
<div> <h3> 풀다운 박스 연결 효과 </h3> <p> 지방 : <select name = "provinces"id = "provinces"> </select> </p> <p> 도시 : <select name = "city"id = "city"> </select> </p> </div>
모든 JavaScript 코드 :
var linkdatas = {지방 : [{ "code": "0", "name": "plee select"}, { "code": "1", "name": "beijing"}, { "code": "2", "name": "tianjin"}, "3", "이름": "{"code "},", ":": ":"4 "} "이름": "Hube"}, { "Code": "5", "Name": "Guangdong"}, { "Code": "6", "Name": "Other"}], 도시 : {0 : [ "Please"], 1 : [ "Chaoyang", "Haidian District", "Dongcheng District", "Xicheng District" 2 : [ "Tianjin"], 3 : [ "Cangzhou", "Shijiazhuang", "Qinhuangdao", "Other"], 4 : [ "Wuhan City", "Yichang City", "Xiangfan City", "Other"], 5 : [ "Guangzhou City", "Shenzhen City", "Shosou City" "," "", "", "" "," "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""시 젠지 시티 " "Zhuhai City", "Other"], 6 : [ "기타"]}}; 함수 부가 (Target, Options) {var OptionEle = null, target = target, 옵션 = 옵션, 옵션 len = 옵션 .length; for (var i = 0; i <옵션 len; i ++) {옵션 ele = document.createelement ( '옵션'); OptionEle.Value = 옵션 [i] .Value; OptionEle.text = 옵션 [i] .text; target.options.add (옵션); }} 함수 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": 지방 [i] .name, "value": 지방 [i] .code})} 부가 장 (pro, probox); /*도시 초기화*/ addOptions (c, [{ "text": initcity, "value": initcity}]); /*연결 이벤트 추가*/ pro.onchange = function () {console.log (this); var ct = city [this.value], ctlen = ct.length, ctbox = []; C.innerhtml = ""; /*City add City*/ for (var j = 0; } addOptions (c, ctbox); }} var provinces = document.getElementById ( 'Provinces'), 도시 = Document.getElementById ( 'Citys'); Provincescityslink (지방, 도시);주 및 시립 연계 효과의 위의 간단한 구현 코드 (권장)는 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.