다중검색 기능을 만들고 있는데 post 로 값을 넘겨둔 뒤에도 select 값을 남겨두고 싶습니다.
본문
안녕하세요. 항상 도움을 받고 있습니다.
주소지 관련 플러그인을 활용해서 select 박스를 만들었습니다.
코드는 아래와 같습니다.
<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>
<script>
function sojaeji(sido, gugun, dong) {
var
addr ={
'시도' : ['선택','서울','부산','대구','인천','광주','대전','울산','강원','경기','경남','경북','전남','전북','제주','충남','충북'],
'선택' : [],
'서울' : ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구','은평구','종로구','중구','중랑구'],
...
this.sido = document.getElementById('sido');
this.gugun = document.getElementById('gugun');
this.dong = document.getElementById('dong');
var parent = this;
makeOption('시도', this.sido);
if (sido) this.sido.value = sido;
if (gugun) {
makeOption(sido, this.gugun);
this.gugun.value = gugun;
}
if (dong) {
makeOption(sido + '->' + gugun, this.dong);
this.dong.value = dong;
}
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);
}
};
this.gugun.onchange = function() {
makeOption(parent.sido.value + '->' + this.value, parent.dong);
};
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;
}
}
</script>
이런 상황에서 보통은
<option value="기타" <?php echo ($type_of_sale== "기타") ? "selected" : "" ?> >기타</option>
이런 식으로 select 값을 남겨두는데 이런 경우에는 어떻게 해야할지 모르겠네요 ..
항상 감사합니다.
답변 2
<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>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function sojaeji(sido, gugun, dong) {
var
addr ={
'시도' : ['선택','서울','부산','대구','인천','광주','대전','울산','강원','경기','경남','경북','전남','전북','제주','충남','충북'],
'선택' : [],
'서울' : ['강남구','강동구','강북구','강서구','관악구','광진구','구로구','금천구','노원구','도봉구','동대문구','동작구','마포구','서대문구','서초구','성동구','성북구','송파구','양천구','영등포구','용산구','은평구','종로구','중구','중랑구'],
'강남구': ['논현동', '신사동'],
'서대문구': ['연희동', '창천동']
//...
};
this.sido = document.getElementById('sido');
this.gugun = document.getElementById('gugun');
this.dong = document.getElementById('dong');
var parent = this;
makeOption('시도', this.sido);
if (sido) this.sido.value = sido;
if (gugun) {
makeOption(sido, this.gugun);
this.gugun.value = gugun;
}
if (dong) {
// makeOption(sido + '->' + gugun, this.dong);
makeOption(gugun, this.dong);
this.dong.value = dong;
}
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);
}
};
this.gugun.onchange = function() {
// makeOption(parent.sido.value + '->' + this.value, parent.dong);
makeOption(this.value, parent.dong);
};
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;
}
}
<?php
$sido = isset($_POST['sido']) ? $_POST['sido'] : '';
$gugun = isset($_POST['gugun']) ? $_POST['gugun'] : '';
$dong = isset($_POST['dong']) ? $_POST['dong'] : '';
$jsvars = "var sido = '{$sido}', gugun = '{$gugun}', dong = '{$dong}';";
echo $jsvars;
?>
// var sido = '서울', gugun = '서대문구', dong = '창천동';
new sojaeji(sido, gugun, dong);
</script>
답변해주셔서 감사합니다!
안녕하세요.
아래의 내용을 참고해 보시겠어요~
<script>
// "기타" 옵션 추가
function addEtcOption(selectElement) {
var option = document.createElement("option");
option.value = "기타";
option.text = "기타";
selectElement.appendChild(option);
}
// 초기화 시 "기타" 옵션 추가
addEtcOption(document.getElementById('sido'));
addEtcOption(document.getElementById('gugun'));
addEtcOption(document.getElementById('dong'));
// 신규 옵션 추가 함수
function addOption(selectElement, value, text) {
var option = document.createElement("option");
option.value = value;
option.text = text;
selectElement.appendChild(option);
}
// 예시: "기타" 옵션 추가
addOption(document.getElementById('sido'), '기타', '기타');
addOption(document.getElementById('gugun'), '기타', '기타');
addOption(document.getElementById('dong'), '기타', '기타');
</script>
답변해주셔서 감사합니다!