检测隐藏 select 选项中的更改事件，该选项本身通过 javascript 更改

Question

我建立了一个下拉菜单，它有样式并使用无序列表。

数组中的项目填充到 select 下拉列表和 ul 下拉列表中。

用户 select 一个项目，它被更新到一个目标范围内，并在选项中被 select 编辑。

然而，由于这一切都是通过 js 完成的，它实际上无法触发 select 的 on change 事件（据我所知）。

有什么方法可以将它绑定到我的其他功能吗？

这里是html：

<div class="selectWrapper">
    <select id="townResult" class="dropdown" name="townSelect">
        <option disabled="" selected="" value="0">SELECT AN AREA</option>
        <option value="Second">Second</option>
        <option value="Third">Third</option>    
    </select>
    <span class="selected">Selected option</span>
    <ul class="townList"></ul>
</div>

JS/jQuery:

var popUkTowns = "[ FEATHERSTONE TOWN, ABARDARE, ABBEYDLE, ABBEYMEAD, ABBEYTOWN, ABBOTS LANGLEY, ABEDEEN, ABERAERON, ABERAMAN, ABERBARGOED, ABERCARN, ABERCHIRDER, ABERCYNON, ABERDARE, ABERDEEN, ABERDEENSHIRE, ABERDOUR, ABERDOVEY, ABERFAN, ABERFELDY, ABERFIELDY, ABERFOYLE, ABERGAVENNY, ABERGELE, ABERGELE  CLWYD, ABERLOUR, ABERSOCH, ABERTILLERY, ABERTRIDWR, ABERYSTWTH, ABERYSTWYTH, ABINGDON, ABOYNE, ABRIDGE, ABROATH, ACCRINGTON, ACHARACLE, ACKLAM, ACKWORTH]";
popUkTowns = popUkTowns.split("[ ").join(",").split("]").join('"').split(",");

var townList = $('.townList');
var townResult = $('#townResult');

for(var i=0;i<popUkTowns.length;i++){
    townList.append('<li>' + popUkTowns[i] + '</li>');
    //townResult.append('<option value="' +popUkTowns[i]+ '">' +popUkTowns[i]+ '</option');
}

selectOption = function(){
    var trigger = $('.selected');
    trigger.on('click',function(){
        $(this).parent().toggleClass('open');
        return false;
    });
    var selectLI = townList.find('li');
    selectLI.on('click',function(){
        var thisLI = $(this).text();
        townResult.empty();
        townResult.append('<option value="' +thisLI+ '" selected="selected">' +thisLI+ '</option>');
        trigger.html(thisLI);
        var selectWrapper = $('.selectWrapper');
        selectWrapper.removeClass('open');
    });
}();

townResult.on('change',function(){
    console.log('Value changed'); // this doesn't work of course
});

我有一个可用的 js fiddle here。通常 select 会被隐藏，但出于本练习的目的，我将其显示在 fiddle 中以证明 select 选项中的值正在更新。

我已经尝试将更改事件绑定到选项以及绑定 selectOption 函数，但我似乎无法触发它，但可能有更好的方法来执行此操作（即当.selected span 已更新）。

Answer 1

您必须在 click 事件中手动 trigger change 事件。以编程方式更改不会自动触发它。

townResult.trigger("change");

Working example.

检测隐藏 select 选项中的更改事件，该选项本身通过 javascript 更改

Detect on change event in hidden select option which is itself changed via javascript

javascript

jquery

bind

onchange