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

【问题标题】：Detect on change event in hidden select option which is itself changed via javascript检测隐藏选择选项中的更改事件，该选项本身通过javascript更改
【发布时间】：2016-08-25 07:41:52
【问题描述】：

我已经建立了一个样式化的下拉列表并使用无序列表。

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

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

但是，由于这一切都是通过 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。通常选择会被隐藏，但出于本练习的目的，我在小提琴中显示它以证明选择选项中的值正在更新。

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

【问题讨论】：

你可以调用townResult.trigger("change")，但是为什么你需要一个隐藏元素的更改处理程序呢？不能从更新选择值的同一代码中触发该处理程序需要执行的任何操作吗？
好吧，我需要一种方法将选择作为参数传递，以在谷歌地图 API 上运行查询。如果我可以在选择范围内发送值，那就太好了，但我认为这需要一个实际的表单值/输入等。
我不明白。为什么不从 selectLI 点击处理程序运行 Google 地图查询？
我认为这是不可能的。我一直在研究一些 js 插件，它们允许您设置下拉选择的样式以及我工作的一个自定义插件，它们都使用隐藏的选择选项来发送数据。但如果我能通过 selectLI 做到这一点，我一定会研究它。
这些插件使用隐藏选择，因为它们旨在用于将要提交的表单中的通用用途。但我不是告诉你不要使用隐藏选择，我是在问你为什么认为你需要一个附加到隐藏选择的更改处理程序？即使假设您需要提交表单，您的selectLI click 处理程序也可以简单地更新隐藏选择的值（就像它已经完成的那样），然后提交表单本身。（但您实际上是在向 Google 地图 API 提交表单吗？）

标签： javascript jquery bind onchange

【解决方案1】：

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

townResult.trigger("change");

Working example.

【讨论】：

谢谢，我希望它会很简单！