자바스크립트 문의 입니다.

자바스크립트 문의 입니다.

QA

자바스크립트 문의 입니다.

본문

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>

답변을 작성하시기 전에 로그인 해주세요.
전체 119
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT