以編程方式在<select>元素中選擇<option>，然後立即取消選擇

我使用php腳本返回的文件名填充<select>元素。上傳文件後，我想要<select>元素自動選擇新上傳的文件。 <select>元素中的<option>元素的值是文件名。我使用jQuery的.prop()函數來設置選定的屬性。該元素似乎被選中，但它立即取消選擇。以編程方式在<select>元素中選擇<option>，然後立即取消選擇

這裏是我的HTML：

<select id="uploadedFilesSelect" name="uploadedFiles" multiple="multiple" onchange="onSelectUploadedFile();"></select>

的Javascript：

if (result['filename']) { 
    $('#uploadedFilesSelect > option:contains(' + result['filename'] + ')').prop('selected', 'selected'); 
}

的JavaScript代碼被稱爲在一個XMLHttpRequest調用一個PHP腳本處理上載的成功處理程序。

觀察，當我上傳文件會發生什麼，我注意到元素滾動到新的文件，並簡要選擇它，但隨後取消選擇。另外，你會注意到我有另一個事件處理程序，onSelectUploadedFile()，綁定到onchange事件。當我手動點擊一個文件時，這個事件觸發，但當它「短暫」被選中時，這個事件不會被觸發。

我在做什麼錯？

編輯：圓滿成功處理

function uploadComplete(evt) { 
    // Parse the returned json string 
    var result = JSON.parse(evt.target.responseText); 

    // Refresh the select box 
    populateSelectWithFiles(); 

    clearFileInput(); 

    // Select the uploaded file in the select element 
    if (result['filename']) { 
     $('#uploadedFilesSelect > option:contains(' + result['filename'] + ')').prop('selected', 'selected'); 
    } 
}

populateSelectWithFiles()調用PHP腳本文件名添加到select元素的功能。

功能clearFileInput()只是通過創建一個新的和頁上的更換清除文件輸入元素。

來源

2012-11-15 ericso

您是否有鏈接到頁面？還有其他事件被解僱嗎？模糊事件，也許......你能發佈ajax成功的完整代碼嗎？ – nullable

@Kurt這是工作，但不幸的是，不能共享。 – ericso

您必須自己觸發onchange事件，.prop（）不會觸發此事件。您可以使用：

$('#uploadedFilesSelect').trigger('change');

來源

2012-11-15 01:41:35 nullable

這工作中途，但我會拿它！它沒有充分發揮作用，該選項不會突出顯示。有沒有辦法做到這一點？ – ericso

嘗試$（ '＃uploadedFilesSelect'）觸發器（ '焦點'）。 – nullable

更接近，它選擇但仍立即取消選擇。但是現在，當它選擇時，它會變成藍色而不是灰色。我假設藍色是焦點顏色。 – ericso

以編程方式在<select>元素中選擇<option>，然後立即取消選擇

回答

相關問題