时间戳

首页 > 解决方案 > 选择下拉列表上的 jQuery 已更新

jquery - 选择下拉列表上的 jQuery 已更新

问题描述

首先，让我说我正在使用专有的 CMS，并且我无法访问源代码。

我有能力添加 javascript 和/或 jQuery，我想在选择下拉列表中的选项更新时触发一个函数。基本上，我可以让 CMS 用一些金额填充下拉列表，并且我想在下拉列表更新时更新总字段。

我试过$('.amounts select').on('change', function() { // code here });了，但显然只有当用户点击下拉菜单并做出选择时才会触发。I need this to go when the options are updated.

这是我目前拥有的：

$(document).on('change','.amounts select', function () {
    var total=0.00;
    $('.amounts option').each(function() {
        total+=$(this).val()!="" && $(this).val() != undefined ? parseFloat($(this).val()) : 0;
    });
    $('.total input').val(total).trigger('change'); 
    console.log('total'+total);
});

如果看到 HTML 有帮助，这里是：

<li attr="Amounts" attrtype="select" name="q90" id="q90" data-aid="512" data-mid="518" data-mpath="518" class="amounts form-q label-left">
    <label class="cf-label" id="FieldLabel90" for="Field90">
        <span>
        <span>Amounts</span>
        </span>
        <span class="screen-reader-legend">field type drop-down</span>
    </label>
    <div class="cf-field">
        <select id="Field90" name="Field90" aria-labelledby="FieldLabel90" class="form-item-field cf-medium" vo="e">
            <option></option>
            <option value="83.30">83.30</option>
            <option value="22.00">22.00</option>
            <option value="705.96">705.96</option>
            <option value="591.50">591.50</option>
            <option value="25.65">25.65</option>
            <option value="198.08">198.08</option>
            <option value="89.41">89.41</option>
            <option value="54.99">54.99</option>
            <option value="278.66">278.66</option>
            <option value="39.09">39.09</option>
        </select>
    </div>
</li>
<li attr="Total" attrtype="text" name="q91" id="q91" data-aid="513" data-mid="519" data-mpath="519" class="total form-q label-left">
    <label class="cf-label" id="FieldLabel91" for="Field91">
        <span>
            <span>Total</span>
        </span>
        <span class="screen-reader-legend">field type input</span>
    </label>
    <div class="cf-field">
        <input type="text" id="Field91" name="Field91" aria-labelledby="FieldLabel91" class="input cf-medium" maxlength="1000" data-list-focus="true" data-parsley-legal-character="True" vo="e">
    </div>
</li>

谢谢您的帮助！

标签： jqueryselectdropdown

解决方案

所以，最终我想出了两个选项来解决这个问题：

  1. 使用ajaxComplete因为 CMS 使用 ajax 调用填充下拉列表，所以：

    $(document).on('ajaxComplete', function () {
    // code here
});

  2. CMS 根据用户在另一个字段中的输入填充该下拉列表，因此我可以.on('change')为该字段做一个并在计算之前等待大约 2 秒，所以：

    $('#Field10 input').on('change', function () {
    setTimeout(function(){
        // code here
    }, 2000);
});

我不会将此标记为正确答案，以防万一有人想出一些使用 select 来触发它的东西。

推荐阅读