即時更改下拉列表數據

我有一個選項框，其中包含多個選項。當選擇時，我使用JQuery更換顯示的文本：即時更改下拉列表數據

$("#dropdownlist").change(function() { 
    var selected = $(this).find(":selected"); 
    selected.text('foo'); 
});

我然後像當選擇倒伏恢復原來的值。我怎樣才能做到這一點？

我試過使用'點擊'事件，但在整個選擇過程中這被觸發多次，這意味着'foo'總是被覆蓋。

在此先感謝。

來源

2012-02-08 Jonathan

這個下拉菜單有一個打開的事件嗎？ – gdoron 2012-02-08 19:34:14

這樣做的目的是什麼？你想達到什麼目的？ – elclanrs 2012-02-08 19:34:25

@gdoron據我所知，一個打開的事件不可用。 – Jonathan 2012-02-08 19:36:50

方法1：只注意到在方法2下面的解決方案是不工作的時候改變了下拉使用鍵盤值和標籤了。

因此，在這種方法中，我在下拉菜單上使用了一個文本框，因此您不必擔心更改下拉值。 DEMO

PS：我用的JQuery UI Position API

var $ddInput = $("#dropdownInput"); 

$ddInput.position({ 
    my: "left top", 
    at: "left top", 
    of: "#dropdownlist" 
}); 

$("#dropdownlist").change(function (event) { 
    $ddInput.val('foo'); 
});

方法2：我們需要一個int標誌的變化再次調用一下，見下面我的代碼。 DEMO

var optionChanged = 0; 

$("#dropdownlist").change(function (event) { 
    var selected = $(this).find(":selected"); 
    selected.attr('data-orig', selected.val()); 
    selected.text('foo'); 
    optionChanged = 1;  
}); 

$("#dropdownlist").click (function() {  

    if (optionChanged == 2) { 
     var selected = $(this).find(":selected"); 
     var tmp = selected.attr('data-orig'); 
     selected.attr('data-orig', selected.val()); 
     selected.text(tmp);  
    } 
    optionChanged = 2;  
});

來源

2012-02-08 19:45:43

奇妙的解決方案 - 尤其是第一個。謝謝。 – Jonathan 2012-02-13 18:41:48

嘗試一個數據屬性，如：

selected.attr('data-oldtext', selected.text());

之前你改變它。

該元素必須「渲染」屬性爲空或與原始文本已經。

<option data-oldtext="">xxx</option>

來源

2012-02-08 19:37:52 giubueno

他的問題是何時恢復它，無論如何''.data（'oldtext'）'更好。 – gdoron 2012-02-08 19:39:05

使用「鼠標」事件來更改和恢復，取決於它是否結束或關閉選擇元素可能工作。我對嗎？ – giubueno 2012-02-08 19:48:16

取決於瀏覽器。閱讀[this]（http://stackoverflow.com/a/6688518/601179） – gdoron 2012-02-08 19:49:12

即時更改下拉列表數據

回答

相關問題