(전체지역)주요지역->세부지역->RealValue(Index.Html)

이 코드는 region[2]로 그룹화하여 첫 번째 <select id="regionGroup"> 에 표시하고,
해당 region[2]에 속하는 region[1]을 두 번째 <select id="regionSub"> 에 표시합니다.
사용자가 region[1]을 선택하면 value가 region[0]이 되고, 이를 sendData(value)로 전달합니다.

<label for="regionGroup">지역 그룹:</label>     <select id="regionGroup">         <option value="">-- 선택하세요 --</option>     </select>     <label for="regionSub">세부 지역:</label>     <select id="regionSub">         <option value="">-- 선택하세요 --</option>     </select>     <script>         const region = [             ["1168000000","강남구","서울시"],             ["1174000000","강동구","서울시"],             ["1130500000","강북구","서울시"],             ["1132000000","도봉구","서울시"],             ["1123000000","동대문구","서울시"],             ["1159000000","동작구","서울시"],             ["1147000000","양천구","서울시"],             ["1156000000","영등포구","서울시"],             ["1117000000","용산구","서울시"],             ["1138000000","은평구","서울시"],             ["1111000000","종로구","서울시"],             ["1114000000","중구","서울시"],             ["1126000000","중랑구","서울시"],             ["4182000000","가평군","경기도"],             ["4128100000","고양시 덕양구","경기도"],             ["4128500000","고양시 일산동구","경기도"],             ["4113300000","성남시 중원구","경기도"],             ["4163000000","양주시","경기도"],             ["4122000000","평택시","경기도"],             ["4165000000","포천시","경기도"],             ["4145000000","하남시","경기도"],             ["4159000000","화성시","경기도"],             ["2871000000","강화군","인천시"],             ["2824500000","계양구","인천시"],             ["2641000000","금정구","부산시"],         ];         const regionGroupSelect = document.getElementById("regionGroup");         const regionSubSelect = document.getElementById("regionSub");         // 그룹화된 지역 그룹 가져오기         const groups = [...new Set(region.map(item => item[2]))];         // 그룹화된 데이터 <select>에 추가         groups.forEach(group => {             const option = document.createElement("option");             option.value = group;             option.textContent = group;             regionGroupSelect.appendChild(option);         });         // 지역 그룹 변경 시 세부 지역 업데이트         regionGroupSelect.addEventListener("change", () => {             const selectedGroup = regionGroupSelect.value;             regionSubSelect.innerHTML = '<option value="">-- 선택하세요 --</option>'; // 초기화             if (selectedGroup) {                 const filteredRegions = region.filter(item => item[2] === selectedGroup);                 filteredRegions.forEach(item => {                     const option = document.createElement("option");                     option.value = item[0];                     option.textContent = item[1];                     regionSubSelect.appendChild(option);                 });             }         });         // 세부 지역 선택 시 SendData 호출         regionSubSelect.addEventListener("change", () => {             const selectedValue = regionSubSelect.value;             if (selectedValue) {                 SendData(selectedValue);             }         });         // SendData 함수 정의         function SendData(value) {             alert(`Selected value: ${value}`);             console.log("SendData called with value:", value);         }     </script>

아파트명클릭시에 네이버부동산으로 LINK)

 

index.html

0.03MB