다중 셀렉트
본문
http://sir.co.kr/qa/?wr_id=74680&stx=2%EC%B0%A8+%EC%85%80%EB%A0%89%ED%8A%B8&sst=wr_num&unanswered=0&s_tag=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C5
amkor님께서 올리신 소스와 그 답변을 통해서 1차 셀렉트 박스에서 내용을 선택하면
2차 다중 셀렉트 박스 내용이 바뀌는 폼까지는 만들었는데
2차 다중 셀렉트 박스의 내용이 DB에 입력이 안됩니다.
고수님들 도움 부탁 드려요ㅜㅜ
<td>
</td>
<option value="">출발지 선택</option>
<option value="지구" <? if($write[wr_5] == "지구") echo " selected "; ?>>지구</option>
<option value="화성" <? if($write[wr_5] == "화성") echo " selected "; ?>>화성</option>
<option value="우주" <? if($write[wr_5] == "우주") echo " selected "; ?>>우주</option>
</select>
</td>
<th scope="row"><label for="wr_11">출발지</label></th>
<td>
<select name="wr_11" id="job1" style="height:20px;display:none">
<option value="">2차선택</option>
<option value="aaa" <? if($write[wr_11] == "aaa") echo " selected "; ?>>aaa</option>
<option value="bbb" <? if($write[wr_11] == "bbb") echo " selected "; ?>>bbb</option>
</select>
<select name="wr_11" id="job2" style="height:20px;display:none">
<option value="">2차선택</option>
<option value="aaa" <? if($write[wr_11] == "aaa") echo " selected "; ?>>aaa</option>
<option value="bbb" <? if($write[wr_11] == "bbb") echo " selected "; ?>>bbb</option>
</select>
<select name="wr_11" id="job3" style="height:20px;display:none">
<option value="">2차선택</option>
<option value="eee" <? if($write[wr_11] == "eee") echo " selected "; ?>>eee</option>
<option value="fff" <? if($write[wr_11] == "fff") echo " selected "; ?>>fff</option>
</select>
<script language="JavaScript">
<!--
function showSub(obj) {
var frm = document.forms.article_searchFrm;
if(obj == "지구") {
document.getElementById("job1").style.display = "block";
document.getElementById("job1").disabled = false;
document.getElementById("job2").style.display = "none";
document.getElementById("job2").disabled = true;
document.getElementById("job3").style.display = "none";
document.getElementById("job3").disabled = true;
} if(obj == "화성") {
document.getElementById("job1").style.display = "none";
document.getElementById("job1").disabled = true;
document.getElementById("job2").style.display = "block";
document.getElementById("job2").disabled = false;
document.getElementById("job3").style.display = "none";
document.getElementById("job3").disabled = true;
} if(obj == "우주"){
document.getElementById("job1").style.display = "none";
document.getElementById("job1").disabled = true;
document.getElementById("job2").style.display = "none";
document.getElementById("job2").disabled = true;
document.getElementById("job3").style.display = "block";
document.getElementById("job3").disabled = false;
}
}
//-->
</script>
</td>
상기 값에서 job1의 데이터는 db에 들어오는데 job2, job3이 안들어와요~ㅜ
!-->
답변 5
공부할겸 하나 만들어 봤습니다.
참고해서 만드시면 될듯하네요 ....
<!-- jquery cdn jquery를 불러오고 있다면 사용하지 않으셔도 됩니다. -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- jquery cdn -->
<div>
<label for="wr_11">출발지</label>
<select name="job" id="job" style="height:20px;display:">
<option value="지구" >지구</option>
<option value="화성" >화성</option>
<option value="우주" >우주</option>
</select>
</div>
<div>
<label for="wr_11">목적지</label>
<select name="wr_11" id='wr_11' style="height:20px;">
<option value=''>출발지를 선택하세요</option>
</select>
</div>
<script language="JavaScript">
$("#job").change(function () {
var job = $(this).val();
switch (job) {
case "지구":
$('#wr_11').find('option').remove();
$('#wr_11').append("<option value=''>2차선택</option>");
$('#wr_11').append("<option value='111'>111</option>");
$('#wr_11').append("<option value='222'>222</option>");
break;
case "화성":
$('#wr_11').find('option').remove();
$('#wr_11').append("<option value=''>2차선택</option>");
$('#wr_11').append("<option value='333'>333</option>");
$('#wr_11').append("<option value='444'>444</option>");
break;
case "우주":
$('#wr_11').find('option').remove();
$('#wr_11').append("<option value=''>2차선택</option>");
$('#wr_11').append("<option value='555'>555</option>");
$('#wr_11').append("<option value='666'>666</option>");
break;
}
});
</script>
write_update.skin.php 파일을 확인하면 정확해지겠지만,
wr_11 => wr_12
wr_11 => wr_13
으로 하단 코드에서 붉은색 부분을 각각 수정해주세요.
<option value="">2차선택</option>
<option value="aaa" <? if($write[wr_11] == "aaa") echo " selected "; ?>>aaa</option>
<option value="bbb" <? if($write[wr_11] == "bbb") echo " selected "; ?>>bbb</option>
</select>
<select name="wr_13" id="job3" style="height:20px;display:none">
<option value="">2차선택</option>wr_11 의 name값이 중복되어져 사용되고 있기때문에
hidden처리를 한다고 해도 맨 마지막 녀석의 값이 전송이 되기 때문입니다.
<style type="text/css">
.second { display:none; }
</style>
<select name="" id="start">
<option value="">출발지 선택</option>
<option value="지구">지구</option>
<option value="화성">화성</option>
<option value="우주">우주</option>
</select>
<select name="wr_11" class="second">
<option value="">2차 선택</option>
<option value="aa">aa</option>
<option value="bb">bb</option>
</select>
<select name="wr_11" class="second">
<option value="">2차 선택</option>
<option value="cc">cc</option>
<option value="dd">dd</option>
</select>
<select name="wr_11" class="second">
<option value="">2차 선택</option>
<option value="ee">ee</option>
<option value="ff">ff</option>
</select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#start").on("change", function() {
var $idx = $("option:selected", this).index() - 1;
$("select[name='wr_11']").each(function() {
$("select[name='wr_11']").css("display", "none").attr("disabled", true);
$("select[name='wr_11']").eq($idx).css("display", "block").attr("disabled", false);
});
});
});
</script>
선택한 애를 제외하고 다른 애들은 disabled만 해 주면 됩니다.
ㅎㅎㅎ 다들 감사합니다;; 질문의 요지는 'DB에 DATA 값이 안들어오는데 뭐가 문제 인가?'였는데;;;
다들 폼을 작성을 해주셨네요;;; 아하하하하하;;;;;;
답변을 작성하시기 전에 로그인 해주세요.