如何动态显示下拉列表

本文关键字：下拉列表 动态显示 | 更新日期: 2023-09-27 18:00:19

我使用网格视图来显示数据库中的数据。有一个状态列，其中包含3个值。我希望用户能够使用网格中的下拉列表来更改值，当用户单击ChangeStatus时，下拉列表将可见，但它出现在每行上。你知道如何做到这一点吗？？

如何动态显示下拉列表

使用一个由三个选项填充的隐藏，以及一个作为正在修改的行的ID的附加值。然后将onclick事件处理程序添加到状态列文本中。单击后，用下拉菜单替换文本，并将值设置为行的ID。

下拉菜单应该有一个事件，onselectedindexchange，它将触发对Web服务（或方法）的ajax回调，该调用接受要更改的行的值和ID。最后，在进行ajax调用后，隐藏并使该单元格的文本成为所选选择项的值（或文本）。

编辑-一些psudeo代码来帮助你走出

<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);
});

可能有很多方法可以让它更清洁，但这应该会给你一个大致的想法。

您能在项目中使用jQuery吗？如果是这样，那么当用户单击"更改状态"链接/按钮时，您可以使用jQuery show() API调用来显示下拉列表。

相关文章：