Question

javaScript代码：从下拉列表中获取数据并显示为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;
    }

下拉代码： onclick调用函数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。'部分。也许你的意思是这样的？??

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

除此之外，当您单击选择元素时，浏览器将触发“onclick”。如果您想在选择新选项后更新视图，则需要使用“onchange”。而且我更喜欢你可以在没有php代码的情况下向我展示DOM结构。

Answer 2

javaScript代码：

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>

使用javaScript从下拉列表中获取值并在div中显示

2 个答案: