셀렉트박스 값 바로 보여주기
본문
메인페이지에서 견적받는 부분을 제작하고 있습니다.
메인에서 특정 게시판으로 글쓰는 부분은 스킨을 다운받아 원하는 형태로 제작을 마쳤습니다.
예를 들어 A제조사의 1번 제품을 선택하면 30,000 이라는 값이 아래 '최종금액'에 바로 표시가 되고
2번 제품 선택시 50,000으로 바로 변경되는 기능을 구현하고 싶습니다.
글등록을 하게 되면 각 항목과 선택한 1번 제품의 값이 등록되게 하고 싶습니다.
wr_1 을 셀렉트 박스로 구성하고 option="1" value="30,000" 으로 준 후에 이 값이 최종금액 위치에 바로 표시 되는 방법이 궁금합니다!
답변 1
<select id="wr_1">
<option value="">-선택-</option>
<option value="1">30,000</option>
<option value="2">50,000</option>
</select>
최종금액 <span id="result"></span>
<script>
$('#wr_1').on('change', function() {
$('#result').text(this.value ? this.options[this.value].text : '');
});
</script>
답변감사드립니다. 알려주신 소스는 정상동작합니다.
다만 제가 구현하려는게,
<option value="30,000">제품1</option>
이러한 형태로,
실제 셀렉트박스에는 '제품1'이 나오고 얘를 선택했을 경우 최종금액에는 30,000이 나오는건데
어떻게 수정을 해야할지요? ㅠ
<select id="wr_1">
<option value="">-선택-</option>
<option value="30,000">제품1</option>
<option value="50,000">제품2</option>
</select>
최종금액 <span id="result"></span>
<script>
$('#wr_1').on('change', function() {
$('#result').text( this.value ? this.value : '' );
});
</script>