자바 스크립트를 사용하여 드롭 다운에서 값을 가져 오지 않고 div에 표시

Question

자바 스크립트 코드 : 데이터를 드롭 다운에서 가져 와서 div 내부 HTML로 표시합니다.

function showcost() { 
     var days = document.getElementById("Ddays"); 
     var Dudays = days.options[days.selectedIndex].text; 
     var div = document.getElementById('cost'); 
     div.innerHTML = div.innerHTML + Dudays * 1200; 
    } 

드롭 다운 번호 : 온 클릭 함수 호출 showcost()

<select class="form-control" name="Ddays" id="Ddays" onchange="showcost()"> 
       <?php $max_days = $HospitalPack->treat_duration + $HospitalPack->recovery_duration; ?> 
         @for($i = $HospitalPack->treat_duration; $i<=$max_days; $i++) 
         @if($i == $HospitalPack->treat_duration) 
          <option selected="selected" value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option> 
         @else 
          <option value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option> 
         @endif 
         @endfor 
       </select> 

DIV 코드 여기 값을 계산 한 후, 데이터를 도시.

<div class="huge" id="cost">{{$HospitalPack->treat_duration * 1200 + $HospitalPack->treat_cost}}</div> 

위 코드는 아무 것도 처리하지 않습니다. 나는 실수를 찾을 수 없다고 생각한다.

Answer 1

먼저 'no.selectedIndex'는 쓸모가 없습니다. 'no.'부분을 제거해야합니다. 대신 'onchange를'당신이 새로운 옵션을 선택하면 사용할 필요가 후보기를 업데이트 싶어 onclick'.If '브라우저가 발생하게 선택 요소를 클릭 게다가

var Dudays = days.options[days.selectedIndex].text; 

. 그리고 PHP 코드 없이도 DOM 구조를 보여줄 수 있습니다.

Answer 2

자바 스크립트 코드 :

function showDucost() { 
     var days = document.getElementById("Ddays"); 
     var Dudays = days.options[days.selectedIndex].text; 
     var pos = Dudays.indexOf("Days"); 
     var days = Dudays.slice(0,pos-1); 
     var div = document.getElementById('Dcost'); 
     var treat_cost = <?php echo $HospitalPack->treat_cost ?>; 
     div.innerHTML = treat_cost + days * 1200; 
    } 

드롭 다운 코드 :

<select class="form-control" name="Ddays" id="Ddays" onchange="showDucost()"> 
    <?php $max_days = $HospitalPack->treat_duration + $HospitalPack->recovery_duration; ?> 
    @for($i = $HospitalPack->treat_duration; $i<=$max_days; $i++) 
    @if($i == $HospitalPack->treat_duration) 
    <option selected="selected" value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option> 
    @else 
<option value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option> 
@endif 
    @endfor 

div 요소 코드 :

<div class="huge" id="Dcost">{{$HospitalPack->treat_duration * 1500 + $HospitalPack->treat_cost}}</div>