새우의 세상사

동적 선택하기(시도 및 시군구 선택)

<!-- 단순 무식한 지역 선택하기입니다. -->

<!-- 특별시, 광역시를 제외한 시의 구는 없는 상태입니다. 필요한 분은 추가하세요. -->

<!-- 예 : 경기도 고양시의 경우 고양시 일산동구, 고양시 일산서구, 고양시 덕양구로 나누면 되겠죠. 즉 고양시를 빼고 위의 세군데를 추가하면 됩니다. -->

<!-- 시도 순서를 바꿀 때는 regionArray[]의 배열 순서도 맞게 바꾸세요. -->

<head>
<title>동적 선택 예제</title>

<!-- 아래의 스크립트를 <head>와 </head> 사이에 넣는다. -->

<!-- --------- 여기부터 ---------- -->
<script language=javascript>
<!--
function deleteAll(f)
{
for (var i=0; i<f.length; i++) {
  f.options[i] = null;
}
f.length = 0;
}

function changeRegion(selform)
{
 var regionArray = Array();
 var regionNone = Array ( "시군구선택" );
 var regionSeoul = Array( "시군구선택", "강남구",  "강동구",  "강북구",
    "강서구",  "관악구",  "광진구",  "구로구",  "금천구",
    "노원구",  "도봉구",  "동대문구",  "동작구",  "마포구",
    "서대문구",  "서초구",  "성동구",  "성북구",  "송파구",
    "양천구",  "영등포구",  "용산구",  "은평구",  "종로구",
    "중구",   "중랑구");
 var regionIncheon = Array ( "시군구선택", "계양구",  "남구",   "남동구",
    "동구",   "부평구",  "서구",   "연수구",  "중구",
    "강화군",  "옹진군");
 var regionDaejeon = Array ( "시군구선택", "대덕구",  "동구",   "서구",
    "유성구",  "중구");
 var regionGwangju = Array ( "시군구선택", "광산구",  "남구",   "동구",
    "북구",   "서구");
 var regionDaegu = Array ( "시군구선택", "남구",   "달서구",  "동구",
    "북구",   "서구",   "수성구",  "중구",   "달성군");
 var regionUlsan = Array ( "시군구선택", "남구",   "동구",   "북구",
    "중구",   "울주군");
 var regionBusan = Array ( "시군구선택", "강서구",  "금정구",  "남구",
    "동구",   "동래구",  "부산진구",  "북구",   "사상구",
    "사하구",  "서구",   "수영구",  "연제구",  "영도구",
    "중구",   "해운대구",  "기장군");
 var regionGyeonggi = Array ("시군구선택", "고양시",  "과천시",  "광명시",
    "광주시",  "구리시",  "군포시",  "김포시",  "남양주시",
    "동두천시",  "부천시",  "성남시",  "수원시",  "시흥시",
    "안산시",  "안성시",  "안양시",  "양주시",  "오산시",
    "용인시",  "의왕시",  "의정부시",  "이천시",  "파주시",
    "평택시",  "포천시",  "하남시",  "화성시",  "가평군",
    "양평군",  "여주군",  "연천군");
 var regionGangwon = Array ( "시군구선택", "강릉시",  "동해시",  "삼척시",
    "속초시",  "원주시",  "춘천시",  "태백시",  "고성군",
    "양구군",  "양양군",  "영월군",  "인제군",  "정선군",
    "철원군",  "평창군",  "홍천군",  "화천군",  "횡성군");
 var regionChungbuk = Array ("시군구선택", "제천시",  "청주시",  "충주시",
    "괴산군",  "단양군",  "보은군",  "영동군",  "옥천군",
    "음성군",  "증평군",  "진천군",  "청원군");
 var regionChungnam = Array ("시군구선택", "계룡시",  "공주시",  "논산시",
    "보령시",  "서산시",  "아산시",  "천안시",  "금산군",
    "당진군",  "부여군",  "서천군",  "연기군",  "예산군",
    "청양군",  "태안군",  "홍성군");
 var regionJeonbuk = Array ( "시군구선택", "군산시",  "김제시",  "남원시",
    "익산시",  "전주시",  "정읍시",  "고창군",  "무주군",
    "부안군",  "순창군",  "완주군",  "임실군",  "장수군",  "진안군");
 var regionJeonnam = Array ( "시군구선택", "광양시",  "나주시",  "목포시",
    "순천시",  "여수시",  "강진군",  "고흥군",  "곡성군",
    "구례군",  "담양군",  "무안군",  "보성군",  "신안군",
    "영광군",  "영암군",  "완도군",  "장성군",  "장흥군",
    "진도군",  "함평군",  "해남군",  "화순군");
 var regionGyeongbuk = Array ("시군구선택", "경산시",  "경주시",  "구미시",
    "김천시",  "문경시",  "상주시",  "안동시",  "영주시",
    "영천시",  "포항시",  "고령군",  "군위군",  "봉화군",
    "성주군",  "영덕군",  "영양군",  "예천군",  "울릉군",
    "울진군",  "의성군",  "청도군",  "청송군",  "칠곡군");
 var regionGyeongnam = Array ("시군구선택", "거제시",  "김해시",  "마산시",
    "밀양시",  "사천시",  "양산시",  "진주시",  "진해시",
    "창원시",  "통영시",  "거창군",  "고성군",  "남해군",
    "산청군",  "의령군",  "창녕군",  "하동군",  "함안군",
    "함양군",  "합천군");
 var regionJeju = Array ( "시군선택",  "서귀포시",  "제주시",  "남제주군",  "북제주군");

 regionArray[0] = regionNone;
 regionArray[1] = regionSeoul;
 regionArray[2] = regionIncheon;
 regionArray[3] = regionDaejeon;
 regionArray[4] = regionGwangju;
 regionArray[5] = regionDaegu;
 regionArray[6] = regionUlsan;
 regionArray[7] = regionBusan;
 regionArray[8] = regionGyeonggi;
 regionArray[9] = regionGangwon;
 regionArray[10] = regionChungbuk;
 regionArray[11] = regionChungnam;
 regionArray[12] = regionJeonbuk;
 regionArray[13] = regionJeonnam;
 regionArray[14] = regionGyeongbuk;
 regionArray[15] = regionGyeongnam;
 regionArray[16] = regionJeju;

 deleteAll(selform.wr_gugun); // 지금 있는 목록 삭제하기.
 
 sidoindex = selform.wr_sido.selectedIndex;
 gugunlen = regionArray[sidoindex].length;
 cur_sido = selform.wr_sido.options[selform.wr_sido.selectedIndex].value;

 selform.wr_gugun.length=gugunlen;

 for (i=0; i<gugunlen; i++) {
  selform.wr_gugun.options[i] = new Option(regionArray[sidoindex][i], regionArray[sidoindex][i]);
  if (cur_sido == swr_sido && swr_gugun == regionArray[sidoindex][i])
   selform.wr_gugun.options[i].selected = true;
 }
}

function initRegion()
{
 var sido = Array ( "시도선택",  "서울특별시", "인천광역시", "대전광역시",
      "광주광역시", "대구광역시", "울산광역시", "부산광역시",
      "경기도",  "강원도",  "충청북도",  "충청남도",
      "전라북도",  "전라남도",  "경상북도",  "경상남도",  "제주도");
 sidolen = sido.length;
 document.fwrite.wr_sido.options.length = sidolen;
 for(var i=0; i<sidolen; i++) {
  document.fwrite.wr_sido.options[i] = new Option(sido[i], sido[i]);
  if (swr_sido == sido[i]) {
   document.fwrite.wr_sido.options[i].selected = true;
   document.fwrite.wr_sido.selectedIndex = i;
  }
 }
}
-->
</script>
<!-- --------- 여기까지 ---------- -->
</head>

<body>

<!-- 아래의 form 부분을 body 태그 안에 넣는다. -->

<!-- --------- 여기부터 ---------- -->
<form name="fwrite">
지 역 :
<select name="wr_sido" OnChange="changeRegion(fwrite)"></select>
<select name="wr_gugun"></select> * 지역을 선택하세요.<br>

<script language="javascript">
<!--
// php 변수 wr_sido와 wr_gugun에 저장된 값을 기본 선택값으로 초기화한다.
// wr_sido와 wr_gugun에 저장된 값이 없으면 첫 항목으로 초기화한다.
var swr_sido = "<?=$wr_sido?>"; // php 변수를 자바스크립트 변수로 저장 - 현재 선택된 시도.
var swr_gugun = "<?=$wr_gugun?>"; // php 변수를 자바스크립트 변수로 저장 - 현재 선택된 시군구.
initRegion();
changeRegion(fwrite);
-->
</script>
<input type="submit" value="확 인">
</form>
<!-- --------- 여기까지 ---------- -->
</body>

<!-- 위의 내용을 모두 한 다음 파일을 php 파일로 저장한다.

<!-- http://사이트주소/파일이름.php?wr_sido=강원도&wr_gugun=인제군 -->

<!-- 주소에 위와 같이 입력하면 시도 부분에 강원도가, 시군구 부분에 인제군이 기본 선택된 상태로 화면이 나타난다. 즉 php의 $wr_sido에 강원도가, $wr_gugun에 인제군이 들어간 상태로 초기화된다. -->

Posted by 새우날다 Trackback 0 Comment 0

댓글을 달아 주세요

원문 링크 : db와 동적연결 콤보박스-원리


db와 동적연결 콤보박스-원리

이건 진짜 유용한 팁이 아닌가 싶어 최근 제가 알아낸 자바스크립트와 데이터베이스 연동법을 기술할가 합니다.

참고로 클래스룸에 있는 무슨 [동적연결 셀렉트], 제가 뭐라 하긴 그렇지만 가히 눈속임이 아닐까 싶습니다.
그게 정말 디비와 연동되는 동적 셀렉트일까?
이게 진짜 동적 연결 셀렉트문입니다.

또 하나의 참고 <예제가 없습니다.>

본래 자바스크립트는 데이터베이스를 연동할 수 없다고 알고 있으나 php와 연결하면 가능하다는걸 알고 계신 분이 엄청 많으실 겁니다.
하지만 페이가 떠 있는 상태에서 리스트를 선택했을 때 콤보 박스나 텍스트 박스에 디비에서 읽은 값을 써 넣기란,,,, 웹페이지를 다시 읽어(리플레쉬) 뿌리는 수밖엔 없을걸루 압니다.

하지만 제가 만든 기법은 웹페이지는 그대로 놔두고 그 웹페이지의 객체 값을 바꿔 버리는 방법입니다.

(사설이 길었나?)

궁금하시저???

먼저 웹페이지를 왕창 짭니다.(한페이지짜리)
물론 input문이나 select문으로 객체들을 만들고 이름도 주셔야조.
그 전에 form 명령을 주구 거기두 이름을 줘야 합니다.

다 되셨나요?
그렇다면 select문에 스크립트 함수를 가동할수 있도록

onChange="모모모()"

를 추가하세요.
이거 뭔지 아시져?? 모르시면 자바스크립트부터 공부하셔야 합니다.
그리구 스크립트를 짭니다.

<script>
parent.TEMP.location = "./dblist.php?findid"+document.form이름.객체이름.options[document.form이름.객체이름.selectedIndex].value
</script>

그리구 dblist.php파일을 만드는데 거긴 평상시와 똑같이 내용 추출하는 것 만들구, 추출 내용을 뿌려줘야 하잖아요,
뿌려줄때 자바스크립트 방식으루 뿌려줘야 한다는 겁니다.

echo("<script>");
echo("function add(){ ");
echo("parent.cp.form이름.객체이름.value='$row[0]'; ");
echo("}"):
echo("</script>");

글구 이 스크립트를 실행하셔야 겠죠?

그건 아시죠?

일반 html에서 자바스크립트만 실행시키고 싶을때 하는방법 다아시죠?

그럼 문제는
parent.cp
parent.TEMP
이 두개가 문젭니다.

프레임을 쪼개세요

rows="*,1"

요것두 무슨 말인지 아시겠죠?
안보이게 하나 쪼개는 겁니다. 쪼개긴 쪼갠거죠
그래서 * 요거에다가 cp라는 이름 할당하고 나머지 1로 쪼갠거에다가 TEMP라는 이름 할당하는 겁니다.
그리고 cp라고 이름 할당한 곳에 열심히 만드신 폼을 로딩하시구요.
그러면 다 된겁니다.

cp에 올려진 문서중 select문의 내용이 바뀌면 모모모() 자바스크립트 함수가 실행되고 셀렉트문의 값을 php로 넘기는데 그 php는 사람눈에 거의 안보이는 프레임에 로딩되서 실행되고 그 결과는 또 cp 프레임의 객체들에게 전달하는 겁니다.

어때요 쥑이죠??

어느정도 지식이 있으신 분들만 이해할 수 있게 쓴것에 대해 대단히 죄송합니다.(글재주가 없습니다.)

궁금사항이나 모르시겠는 것은 저에게 메일을
캬캬캬

Posted by 새우날다 Trackback 0 Comment 0

댓글을 달아 주세요