How to show dropdownlist dynamically
I am using grid view to display data from database. There is a status column which holds 3 values. I wan the user to be able to change the value using a dropdownlist in the grid which will be visible when the user clicks on the ChangeStatus but which is present 开发者_运维知识库on each row.Any ideaa how to achieve this??
Using a hidden that is populated with the three options, and an additional value that is the ID of the row that is being modified. Then add an onclick event handler to the status column text. When it's clicked, replace the text with the dropdown menu and set the value to the ID of the row.
The dropdown menu should have an event, onselectedindexchange, that will trigger an ajax call back to a webservice (or method) that takes in the value and the ID of the row to change. Finally, once the ajax call is made, hide the and make the text of that cell the value (or text) of the select item selected.
Edit - some psudeo code to help you out
<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);
});
probably a number of ways to do this cleaner - but this should give you the rough idea.
Can you use jQuery in your project? If so, then you could use jQuery show()
API call to make the dropdown list appear when the user clicks on the "Change Status" link/button.
精彩评论