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

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;

除此之外，当您单击 select 元素时，浏览器会触发 'onclick'。如果您想在 select 一个新选项后更新视图，您需要使用 '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 中

Using javaScript not getting value from dropdown and showing in div

html

javascript

css

jquery

laravel-5.2