JavaScriptで変更された隠しセレクトオプションの変更イベントで検出する

Question

私はスタイリングされ、順序付けられていないリストを使用するドロップダウンを構築しました。

アレイの項目は、選択ドロップダウンおよびulドロップダウンに入力されます。

ユーザーはアイテムを選択し、オプションで選択されただけでなく、ターゲットスパンに更新されます。

しかし、これはすべてjs経由で行われるため、実際にはselectの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フィドルhereを持っています。通常、選択は非表示になりますが、この練習の目的では、値が選択オプションで更新されていることを証明するために、この練習問題を表示します。

私は変更のイベントをオプションにバインドしようとしましたが、selectOption機能をバインドしようとしましたが、トリガーできないようですが、これを行うためのより良い方法があるかもしれません（つまり、.selected spanが更新された）。

Answer 1

clickイベントでは、changeイベントを手動でtriggerにする必要があります。プログラム上の変更は、自動的にトリガされません。

townResult.trigger("change"); 

Working example.