자바스크립트 문의 입니다.
본문
wr_1
wr_2
wr_3
이 글쓰기에서 select 입니다.
제이쿼리나 자바스크립트로
wr_1에서 none 값이 어떤 값이든 선택이 되면
wr_1은 기본이 100 입니다.
wr_2는 기본이 300입니다.
즉, wr_1이나 wr_2에서 어떤값이든 값이 들어오면 100 + 200 더해서 300을 wr_3 input 에 텍스트로 넣으면 됩니다.
이게 실시간으로 되어야 하거든요~
wr_1에서 select 를 없음 none 으로 선택하면 다시 100 값이 빠져서 wr_3에는 200만 들어가고요`
답변 2
초반에 주신 소스로 변경해보아서 테스트 해보았는데 아무런 문제가 없습니다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#wr_1" ).change(function() {
var wr_1= parseInt($("#wr_1 option:selected").val());
var hap = parseInt($('#hap').val());
if(wr_1){
var chk_hap = hap + wr_1;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - wr_1;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_2" ).change(function() {
var wr_2= parseInt($("#wr_2 option:selected").val());
var hap = parseInt($('#hap').val());
if(wr_2){
var chk_hap = hap + wr_2;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - wr_2;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_3" ).change(function() {
var wr_3= parseInt($("#wr_3 option:selected").val());
var hap = parseInt($('#hap').val());
if(wr_3){
var chk_hap = hap + wr_3;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - wr_3;
document.getElementById('hap').value = chk_hap;
}
});
});
</script>
<input type="hiden" name="hap" id="hap" value="0">
<select name="wr_1" id="wr_1">
<option value="">없음</option>
<option value="65">65</option>
<option value="15">15</option>
</select>
<select name="wr_2" id="wr_2">
<option value="">없음</option>
<option value="65">65</option>
<option value="15">15</option>
</select>
<select name="wr_3" id="wr_3">
<option value="">없음</option>
<option value="65">65</option>
<option value="15">15</option>
</select>
감사합니다~~~
뭐 이런식이지 않을까요??
조금더 깔끔하게 수정하셔도 될것 같긴한데...아무튼 제가 이해한 데로 만들어봤습니다.
<script>
$(document).ready(function(){
$( "#wr_1" ).change(function() {
var wr_1= $("#wr_1 option:selected").val();
var hap = $('#hap').val();
if(wr_1){
var chk_hap = hap + 100;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - 100;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_2" ).change(function() {
var wr_2= $("#wr_2 option:selected").val();
var hap = $('#hap').val();
if(wr_2){
var chk_hap = hap + 300;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - 300;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_3" ).change(function() {
var wr_3= $("#wr_3 option:selected").val();
var hap = $('#hap').val();
if(wr_3){
var chk_hap = hap + 0;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - 0;
document.getElementById('hap').value = chk_hap;
}
});
});
</script>
<input type="hiden" name="hap" id="hap" value="0">
<select name="wr" id="wr_1" onchange="함수(this.value)">
</select>
<select name="wr" id="wr_2">
</select>
<select name="wr" id="wr_3">
</select>
알려주신대로 해서 좀 해봤습니다.
<script>
$(document).ready(function(){
function totalIt() {
$( "#wr_1" ).change(function() {
var wr_1= $("#wr_1 option:selected").val();
var hap = $('#hap').val();
if(wr_1){
var chk_hap = hap + 100;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - 100;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_2" ).change(function() {
var wr_2= $("#wr_2 option:selected").val();
var hap = $('#hap').val();
if(wr_2){
var chk_hap = hap + 300;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - 300;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_3" ).change(function() {
var wr_3= $("#wr_3 option:selected").val();
var hap = $('#hap').val();
if(wr_3){
var chk_hap = hap + 0;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - 0;
document.getElementById('hap').value = chk_hap;
}
});
}
});
</script>
<input type="hiden" name="hap" id="hap" value="0">
<select name="wr_1" id="wr_1" onchange="totalIt(this.value)">
<option value="">없음</option>
<option value="65"<?php echo get_selected($list[$i]['wr_1'], '65'); ?>>65</option>
<option value="15"<?php echo get_selected($list[$i]['wr_1'], '15'); ?>>15</option>
</select>
<select name="wr_2" id="wr_2" onchange="totalIt(this.value)">
<option value="">없음</option>
<option value="65"<?php echo get_selected($list[$i]['wr_2'], '65'); ?>>65</option>
<option value="15"<?php echo get_selected($list[$i]['wr_2'], '15'); ?>>15</option>
</select>
<select name="wr_3" id="wr_3" onchange="totalIt(this.value)">
<option value="">없음</option>
<option value="65"<?php echo get_selected($list[$i]['wr_3'], '65'); ?>>65</option>
<option value="15"<?php echo get_selected($list[$i]['wr_3'], '15'); ?>>15</option>
</select>
wr_1이든 wr_2이든 none 즉, 없음으로 선택했을때 값이 없죠~
이랬을때는 값이 0으로 가면 되고요~
wr_1 에서던 어떤 옵션 select 를 하더라도 값이 있다면 wr_1은 무조건 100으로 가면됩니다
값이 있나 없나만 확인해서 값이 있으면 wr_1 100 으로 갑니다
나머지도 wr_2 도 wr_3도 마찬가지고요`
그래서 그 값이 모두 더해서 hap에 들어가면 됩니다.
우선 onchange의 함수는 안하셔도 됩니다. 왜냐하면 이미 jquery로 change를 걸었기 때문이죠...
그리고 댓글 다신게 안된다는 말씀이신것인지..여부가 안적혀서요..ㅜㅜ어느 부분이 오류가 나는지 여부로 알려드릴수 있을것 같습니다.
우선 wr_1을 예로 들때
var wr_1= $("#wr_1 option:selected").val();
해당 내용은 wr_1의 option value 값을 가지고 나옵니다.
그래서
if($wr_1) {
$wr_1의 값이 있다.
}else{
$wr_1의 값이 없다.
}
를 사용하게 된것이구요...있을땐 값을 넣어주시고 없을땐 재아님께서 원하시는데로 적용하시면 되는데 input의 합이 없을때 무조건 0 처리를 하고싶으시다면
document.getElementById('hap').value = 0;
처리 하시면 되고 만약 100을 추가 한걸 없애고 싶으시다면
var chk_hap = hap - 100;
document.getElementById('hap').value = chk_hap; 로 하시면 현재 input 의 hap 에서 -100을 하라고 명령을 내린것 뿐입니다.
답변이 되었는지 잘 모르겠지만..혹시 잘못된 답변이라면 재아 님께서 현재 했을때 오류가 나는 내용을 작성해주신다면...다시 답변 드리도록 하겠습니다.
음..지나가던 나그네인데 재아님께서 짜신 코드중에서.. wr_1,wr_2,wr_3 change 함수 모두에 #hap의 밸류값이 있는데요..그걸 전역변수로 빼보심이? 리턴값이 없으니 각 함수에선 #hap의 밸류값을 ready상태로 그대로 갖고있는거같네요 전역변수로 빼시고 change이벤트의 마지막에 리턴값으로 전역변수 #hap의 밸류에 덮어씌워보시기 바랍니댱
수정 해보았습니다.
$(function(){
$( "#wr_4" ).change(function() {
var wr_4= $("#wr_4 option:selected").val();
var hap = $('#wr_9').val();
if(wr_4 != 0){
var chk_hap = hap + 50000;
document.getElementById('wr_9').value = chk_hap;
}else{
var chk_hap = hap - 50000;
document.getElementById('wr_9').value = 0;
}
});
$( "#wr_5" ).change(function() {
var wr_5 = $("#wr_5 option:selected").val();
var hap = $('#wr_9').val();
if(wr_5 != 0){
var chk_hap = hap + 30000;
document.getElementById('wr_9').value = chk_hap;
}else{
var chk_hap = hap - 30000;
document.getElementById('wr_9').value = 0;
}
});
$( "#wr_6" ).change(function() {
var wr_6= $("#wr_6 option:selected").val();
var hap = $('#wr_9').val();
if(wr_6 != 0){
var chk_hap = hap + 100000;
document.getElementById('wr_9').value = chk_hap;
}else{
var chk_hap = hap - 100000;
document.getElementById('wr_9').value = 0;
}
});
});
문제점은... 값은 들어가는데요~
더하기가 안되고 이어 붙어 쓰기가 되네요...
다시 말해서
wr_4, wr_5, wr_6등의 각각의 값에 0인경우 0이 더해져야 하고요~
0이 아닌 다른값이 있는경우는 value 값 무시하고
각 기정된 wr_4 = 5만 wr_5 = 3만 wr_6 = 10만
이 되어서 총합이 되어야 합니다.
물론 wr_5를 선택 안하면 0이되어서 총 합이 15만이 나와야 하고요~
초반에 주신 소스로 변경해보아서 테스트 해보았는데 아무런 문제가 없습니다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#wr_1" ).change(function() {
var wr_1= parseInt($("#wr_1 option:selected").val());
var hap = parseInt($('#hap').val());
if(wr_1){
var chk_hap = hap + wr_1;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - wr_1;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_2" ).change(function() {
var wr_2= parseInt($("#wr_2 option:selected").val());
var hap = parseInt($('#hap').val());
if(wr_2){
var chk_hap = hap + wr_2;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - wr_2;
document.getElementById('hap').value = chk_hap;
}
});
$( "#wr_3" ).change(function() {
var wr_3= parseInt($("#wr_3 option:selected").val());
var hap = parseInt($('#hap').val());
if(wr_3){
var chk_hap = hap + wr_3;
document.getElementById('hap').value = chk_hap;
}else{
var chk_hap = hap - wr_3;
document.getElementById('hap').value = chk_hap;
}
});
});
</script>
<input type="hiden" name="hap" id="hap" value="0">
<select name="wr_1" id="wr_1">
<option value="">없음</option>
<option value="65">65</option>
<option value="15">15</option>
</select>
<select name="wr_2" id="wr_2">
<option value="">없음</option>
<option value="65">65</option>
<option value="15">15</option>
</select>
<select name="wr_3" id="wr_3">
<option value="">없음</option>
<option value="65">65</option>
<option value="15">15</option>
</select>
