オンザフライでドロップダウンリストデータを変更する

Question

私は多くのオプションを持つ選択ボックスを持っています。選択が行われると、私はjQueryのを使用して表示されたテキストを置き換える：

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

私はその後、選択がドロップダウンされたときに元の値を復元したいと思います。これどうやってするの？

私は 'クリック'イベントを使用しようとしましたが、これは選択プロセス中何度も起動されます。つまり、 'foo'は常に上書きされます。

ありがとうございます。あなたはそれを変更する前に

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

：

Answer 1

アプローチ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;  
}); 

Answer 2

のようなデータプロパティを試してみてください。

要素は空の属性または元のテキストで既にレンダリングされている必要があります。

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