檢測隱藏選擇選項中的更改事件，它本身通過javascript更改

我構建了一個樣式爲下拉式並使用無序列表。檢測隱藏選擇選項中的更改事件，它本身通過javascript更改

數組中的項目填充到選擇下拉列表和ul下拉列表中。

用戶選擇一個項目，並將其更新到目標範圍內，以及在選項中進行選擇。

但是，因爲這一切都是通過js完成的，所以無法實際觸發select的更改事件（據我所知）。

有沒有辦法將它綁定到我的其他功能？

下面是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已更新時）。

來源

2016-08-25 lharby

你可以叫'townResult.trigger（「變」）'，但你爲什麼需要改變處理一個隱藏的元素上呢？難道無論處理程序需要做什麼都能從更新選擇值的相同代碼中觸發？ – nnnnnn

嗯，我需要一種方式將select作爲參數傳遞給在google maps API上運行查詢。如果我可以發送選擇範圍內的值，那麼很好，但我認爲這將需要一個實際的窗體值/輸入等。 – lharby

我不明白。爲什麼不運行'selectLI'點擊處理程序中的Google地圖查詢？ – nnnnnn

您必須triggerchange事件手動在click事件中。編程式更改不會自動觸發它。

townResult.trigger("change");

Working example.

來源

2016-08-25 07:48:00 eisbehr

謝謝，我希望這會很簡單！ – lharby

不客氣，@ lharby – eisbehr

檢測隱藏選擇選項中的更改事件，它本身通過javascript更改

回答

相關問題