테스트 사이트 - 개발 중인 베타 버전입니다

다중검색 기능을 만들고 있는데 post 로 값을 넘겨둔 뒤에도 select 값을 남겨두고 싶습니다. 채택완료

호다 2년 전 조회 1,541

안녕하세요. 항상 도움을 받고 있습니다. 

주소지 관련 플러그인을 활용해서 select 박스를 만들었습니다. 

코드는 아래와 같습니다. 

   

     

     

     

     

     

     

     

     

     

이런 상황에서 보통은 

이런 식으로 select 값을 남겨두는데 이런 경우에는 어떻게 해야할지 모르겠네요 .. 

항상 감사합니다. 

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
2년 전

</p>

<p><form method="post">

<table>

    <tr>

     <th>

      <label class="control-label" for="">지역</label>

     </th>

     <td class="address_box">

      <select class="form-control mgb" name="sido" id="sido"></select>

      <select class="form-control" name="gugun" id="gugun"></select>

      <select class="form-control mgb" name="dong" id="dong"></select>

     </td>

    </tr>

</table>

<input type="submit">

</form></p>

<p>

<script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>

<script>

function sojaeji(sido, gugun, dong) {

 var

 addr ={

 '시도' : ['선택','서울','부산','대구','인천','광주','대전','울산','강원','경기','경남','경북','전남','전북','제주','충남','충북'],

 '선택' : [],

  '서울' : ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구','은평구','종로구','중구','중랑구'],

  '강남구': ['논현동', '신사동'],

  '서대문구': ['연희동', '창천동']

//...

};</p>

<p>this.sido = document.getElementById('sido');

 this.gugun = document.getElementById('gugun');

 this.dong = document.getElementById('dong');

 var parent = this;</p>

<p> makeOption('시도', this.sido);</p>

<p> if (sido) this.sido.value = sido;</p>

<p> if (gugun) {

  makeOption(sido, this.gugun);

  this.gugun.value = gugun;

 }</p>

<p> if (dong) {

  // makeOption(sido + '->' + gugun,  this.dong);

  makeOption(gugun,  this.dong);

  this.dong.value = dong;

 }</p>

<p> this.sido.onchange = function() {

  if(this.value == "선택"){

   $("#gugun").html("");

   $("#dong").html("");

  }else{

   makeOption(this.value, parent.gugun);

   // makeOption(this.value + '->' + parent.gugun.value, parent.dong);

   makeOption(parent.gugun.value, parent.dong);

  }

 };</p>

<p> this.gugun.onchange = function() {

  // makeOption(parent.sido.value + '->' + this.value, parent.dong);

  makeOption(this.value, parent.dong);

 };</p>

<p> function makeOption(idx, obj) {

  var html = '', i=0;

  for (; i<addr[idx].length; i++) html += '<option value="'+addr[idx][i]+'">'+addr[idx][i]+'</option>';

  obj.innerHTML = html;

 }

}</p>

<p>

<?php

$sido = isset($_POST['sido']) ? $_POST['sido'] : '';

$gugun = isset($_POST['gugun']) ? $_POST['gugun'] : '';

$dong = isset($_POST['dong']) ? $_POST['dong'] : '';</p>

<p>$jsvars = "var sido = '{$sido}', gugun = '{$gugun}', dong = '{$dong}';";

echo $jsvars;

?></p>

<p>// var sido = '서울', gugun = '서대문구', dong = '창천동';</p>

<p>new sojaeji(sido, gugun, dong);

</script></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

호다
2년 전
답변해주셔서 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

2년 전

안녕하세요.

아래의 내용을 참고해 보시겠어요~

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

호다
2년 전
답변해주셔서 감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인