ドロップダウンリストを動的に表示する方法

Question

グリッドビューを使用してデータベースからデータを表示しています。 3つの値を保持するステータス列があります。私は、ユーザーがChangeStatusをクリックしたときに表示されるグリッドのドロップダウンリストを使用して値を変更できるようにするつもりですが、各行に存在します。どのようにこれを達成するためのアイデア??

Answer 1

3つのオプションが設定された隠しファイルを使用し、追加の値は変更される行のIDです。次に、onclickイベントハンドラをstatusカラムテキストに追加します。クリックすると、テキストがドロップダウンメニューに置き換えられ、値が行のIDに設定されます。

ドロップダウンメニューには、変更する行の値とIDを取り込むWebサービス（またはメソッド）にajaxコールを戻すイベントonselectedindexchangeが必要です。最後に、ajax呼び出しが行われたら、そのセルのテキストを非表示にして、選択した選択項目の値（またはテキスト）をテキストにします。

編集 - このクリーナーを行う方法のおそらく数

<table> 
    <tr> 
     <td><span id="recordId" class="select">Status</span></td> 
    </tr> 
</table> 


<div style="display: none" id="hiddenDiv"> 
<select id="statusSel" > 
    <option value="0"> - Select Status - </option> 
    <option value="Status1">Status 1</option> 
    <option value="Status1">Status 1</option> 
    <option value="Status1">Status 1</option> 
</select> 
</div> 


var statusSel = $('#statusSel'); 
var recordId = 0; 


statusSel.change(function() { 
    var newStatus = $(this).value(); //I think this is right for select 

    //Ajax Call to web server (see $.ajax() in jQuery notes) 
    $.ajax(/* pass newStatus and recordId */); 

    $('#hiddenDiv').html(statusSel); //Move statusSel back to hidden div 
    $(this).parent().html(newStatus); //set the span value to the new status 
}); 


$('.select').click(function() { 
    $(this).html(statusSel); 
}); 

をあなたを助けるためにいくつかのpsudeoコード - しかし、これはあなたのラフなアイデアを与える必要があります。

Answer 2

プロジェクトでjQueryを使用できますか？その場合、jQuery show() APIコールを使用して、ユーザーが[Change Status]リンク/ボタンをクリックしたときにドロップダウンリストを表示させることができます。