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

Question

我构建了一个下拉菜单，该下拉菜单已设计样式并使用无序列表。

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

用户选择一个项目，它会更新为目标范围，以及在选项中被选择。

但是，由于这一切都是通过 js 完成的，因此它无法实际触发选择的 on Change 事件(据我所知)。

有什么办法可以将它绑定(bind)到我的其他函数吗？

这是 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 。通常情况下，选择将被隐藏，但出于本练习的目的，我将其显示在 fiddle 中，以证明该值正在选择选项中更新。

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

Answer 1

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

townResult.trigger("change");

<强> Working example.