2011-05-11 173 views
4

我一直在尋找這個問題的答案很長一段時間了,沒有運氣,或在最大的錯誤解決方案。選擇下拉列表中的已選項目/選擇列表

即時通訊面臨的問題是,我有一個選擇元素(顯然)選擇已經選擇的項目時不會觸發「onchange」事件。

像這樣:

<select onchange="alert(this.value);"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

現在,說我選擇第1項第一位。 然後,我需要能夠再次選擇項目1。

此功能對於我正在開發的項目的成功非常重要。

任何幫助是極大的讚賞。

編輯:(更多信息)

選擇了「西班牙」此功能需要作爲即時通訊與谷歌地圖,用戶都presentet用下拉快速跳轉到一個國家項目(如工作在谷歌地圖設置西班牙作爲你的看法

當你想要去西班牙,然後拖動地圖,並最終在意大利現在你想回到西班牙,但你不能從下拉菜單中選擇它,直到你選擇其他的東西。我的老闆不喜歡那個:)

編輯2:解決方案

因此,現在theres幾個解決方案。 其中之一是拋出行動onblur(當忽略控制)這可能工作,因爲我可以模糊列表onchange,但仍然爲人們再次選擇相同的項目,觸發模糊控制將不會去,和除非他們通過自己切換焦點,否則他們不會看到地圖的變化。

我仍然不明白爲什麼它應該很難找到一些事件,選擇選擇/點擊/模糊或任何其他事情。虐待不斷看自己,稍後再回來看看。

編輯3:最後的解決方案

權利,使我終於得到這個工作,不完全是因爲它是彪是,但足夠接近,至少現在反正。

我想出的解決方案是在選擇的頂部添加一個「請選擇國家」選項。 然後在更改時,我會將「請選擇國家」的文本和值更改爲所選項目的值,並將選定的索引重置爲0. 這樣,在選擇西班牙時,它將位於頂部的列表處於禁用狀態,並進一步處於工作狀態。所以現在你可以點擊列表中間的西班牙回到西班牙,儘管它仍然是選中的(首選項是)

非常整潔,想法是由同事提供的。

腳本如下:

var dummyOption; 
function setdummyCountry(obj) 
{ 
    var selectedOption = obj.options[obj.selectedIndex]; 
    if (dummyOption != null) { 
     dummyOption.text = selectedOption.text; 
     dummyOption.value = selectedOption.value; 
    } 
    else { 
     dummyOption = document.createElement("option"); 
     dummyOption.text = selectedOption.text; 
     dummyOption.value = selectedOption.value; 
     dummyOption.setAttribute("disabled", "true"); 
     obj.options[0] = dummyOption; 
    } 
    obj.selectedIndex = 0; 
} 

<select onchange="setdummyCountry(this);"> 
    <option value="">Please select country</option> 
    <option value="ES">spain</option> 
    <option value="SE">sweden</option> 
    <option value="NO">norway</option> 
</select> 

我希望這會幫助別人!

對那些試圖幫助我的人感謝您的想法和時間。

+1

如果平變化改變的onclick做這種出來的嗎? – Paddy

+0

您可以添加更多關於您爲什麼需要此行爲的信息嗎?我們可能會給你一個更好的選擇 – JohnP

+0

只需先寫所有的選項,並添加一個'selected'標籤。是所有的選項都在數組??請解釋更多 – diEcho

回答

1

這可能不是非常苛刻的你想要什麼,但這是你可以決定的另一種選擇。 後選擇該選項,拿回來爲默認值(空單/第一)選項

<select onchange="alert(this.value);this.value='';"> 
<option value='' selected='selected'></option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

,或者你可以讓

<select onblur="alert(this.value);"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

,但這樣一來會調用你的函數(警告)當用戶離開/ blur/unfocus the list:p

2

我認爲如果選擇相同的項目,沒有辦法改變事件會發射。我們面臨同樣的問題,所以我們做的只是一個簡單的可用性hack:選擇一個項目時,我們向用戶顯示在一個範圍中選擇的項目,並將下拉列表的值重置爲默認值( - 選擇 - )。

HTH

1

我一直在尋找其他情況相同的解決方案,最後寫一個angularjs指令爲同 -

guthub link - angular select

用於element[0].blur();刪除焦點從選擇標籤。邏輯是在第二次點擊下拉時觸發這種模糊。

as-select即使用戶在下拉列表中選擇了相同的值,也會被觸發。

DEMO - link