Question

我试图检测.form-group内的最新输入/选择是否发生了变化，例如：

<div class="form-group">
    <label class="title-label">Birthdate</label>
    <div class="d-flex">
        <div class="pr-3">
            <select name="select-22" class="custom-select">
                <option selected disabled>Month</option>
                <option value="1">01</option>
                <option value="2">02</option>
            </select>
        </div>
        <div class="pr-3">
            <select name="select-4" class="custom-select">
                <option selected disabled>Day</option>
                <option value="Enero">Jan</option>
                <option value="Febrero">Feb</option>
            </select>
        </div>
        <div class="">
            <select name="select-3" class="custom-select">
                <option selected disabled>Year</option>
                <option value="1951">1951</option>
                <option value="1950">1950</option>
            </select>
        </div>
    </div>
</div>

在这种情况下，将/ blur更改为'select-3'应该触发另一个动作。

更新：

我已经解决了这个问题：

$('.form-group').on('change', 'select, input', function(){
    var $this = $(this);
    var $elem = $this.closest('div').next().find('select, input');

    if($elem.length == 0) {
        console.log("Latest element changed");
    }
});

Answer 1

您可以使用getElementsByClassName选择所有.form-group div，从那里选择最后一个元素作为其标记名称并在其上添加一个事件监听器

＆＃13;

let el = [...document.getElementsByClassName('form-group')[0].getElementsByTagName('select')].pop();
el.addEventListener('change', e => console.log(e.target.value));

＆＃13;

<div class="form-group">
    <label class="title-label">Birthdate</label>
    <div class="d-flex">
        <div class="pr-3">
            <select name="select-22" class="custom-select">
                <option selected disabled>Month</option>
                <option value="1">01</option>
                <option value="2">02</option>
            </select>
        </div>
        <div class="pr-3">
            <select name="select-4" class="custom-select">
                <option selected disabled>Day</option>
                <option value="Enero">Jan</option>
                <option value="Febrero">Feb</option>
            </select>
        </div>
        <div class="">
            <select name="select-3" class="custom-select">
                <option selected disabled>Year</option>
                <option value="1951">1951</option>
                <option value="1950">1950</option>
            </select>
        </div>
    </div>
</div>

＆＃13;

Answer 2

这是我的最终解决方案：

$('.form-group').on('change', 'select, input', function(){
    var $this = $(this);
    var $elem = $this.closest('div').next().find('select, input');

    if($elem.length == 0) {
        console.log("Latest element changed");
    }
});

如何检查最新的选择是否已更改（jQuery）

2 个答案: