通过selectpicker自动插入输入表单

Question

我想通过selectpicker自动输入，然后计算该表单，但下面的代码不是自动输入，除非我先单击输入表单，计算javascript正在工作，但我想让输入价格在我选择包时自动具有值& 行程无需先点击输入表格。

抱歉我的英语语法不好，我刚刚开始学习编程。谢谢，这是我的代码如下：

超文本标记语言

<label>Package</label>

<select  onblur="findTotal()" class="selectpicker" id="package">

  <option value="" disabled selected>Select package...</option>

  <option value="Engagement">Engagement</option>

  <option value="Wedding">Wedding</option>

  <option value="Other">Other</option>

</select>

<br/>

<label>Trip</label>

<select  onblur="findTotal()" class="selectpicker" id="trip">

  <option value="" disabled selected>Select trip...</option>

  <option value="shorttrip">Short Trip</option>

  <option value="longttrip">Long Trip</option>

</select>

<br/><br/>

<label>Package Price</label>

<input onblur="findTotal()" type="text" name="qty" id="packageprice" placeholder="autoinput by selectpicker" />

<br/>

<label>Trip Price</label>

<input onblur="findTotal()" type="text" name="qty" id="tripprice" placeholder="autoinput by selectpicker" />

<br/>

<label>Tip</label>

<input onblur="findTotal()" type="text" name="qty" placeholder="manual input"  />

<br/><br/>

<label>Total Price</label>

<input type="text" name="result" id="total" />

脚本语言

function findTotal(){

    var arr = document.getElementsByName('qty');

    var tot=0;

    var paket = document.getElementById('package').value;

    var trp = document.getElementById('trip').value;

    

    for(var i=0;i<arr.length;i++){

        if(parseInt(arr[i].value))

            tot += parseInt(arr[i].value);

    }

    

    if (paket == "Engagement") {

        document.getElementById('packageprice').value = "1000";

    } else if (paket == "Wedding") {

      document.getElementById('packageprice').value = "2000";

    } else {

      document.getElementById('packageprice').value = "0";

    }

或者您可以在此处查看 JS Fiddle 上的代码： http: //jsfiddle.net/ryh7vpwa/5/

Answer 1

您应该在实现 findTotal 函数的元素上使用oninput而不是onblur<select&nbsp; oninput="findTotal()" class="selectpicker" id="package">&nbsp; <option value="" disabled selected>Select package...</option>&nbsp; <option value="Engagement">Engagement</option>&nbsp; <option value="Wedding">Wedding</option>&nbsp; <option value="Other">Other</option></select><br/><label>Trip</label><select&nbsp; oninput="findTotal()" class="selectpicker" id="trip">&nbsp; <option value="" disabled selected>Select trip...</option>&nbsp; <option value="shorttrip">Short Trip</option>&nbsp; <option value="longttrip">Long Trip</option></select>