我有一个HTML表格，可以从数据库中加载数据。当我单击一行时，模态弹出窗口从数据库中提取更多内容，并带有一个选项来编辑所选行的更改。
我的困境是如何填充下拉列表并选择保存在数据库中的值？
很容易绑定其他控件，例如Textarea，输入框等。我的问题是下拉列表。
仅供参考我使用ASP.NET Web Forms和C＃，我使用jQuery AJAX和WebService从数据库中获取数据。 提前完成。
我将演示文稿与逻辑混合在了一起。 我在这里更新了问题是js：
$("body").delegate("a.view-link", "click", function (e) {
e.preventDefault();
var requestID = $(this).data("reqid");
$.ajax({
type: "POST",
url: "../helpdeskservice.asmx/GetModalContent",
data: "{'requestID':'" + requestID + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
$('#modalEditCall').html(response.d); //Bind
$('#requestConfirmed').modal('toggle') } });
$('#modalEditCall').modal('toggle')
});
WebService方法
[WebMethod]
public string GetModalContent(string requestID)
{
try
{
return ViewExtensions.GetCallModal(requestID);
}
catch (Exception ex)
{
throw ex;
}
}
我用来构建html的C＃类
public static string GetCallModal(string requestID)
{
var usrRequestObject = new DBHelpDesk();
var categories = usrRequestObject.GetCategories();
var modalddlCategories = new StringBuilder(String.Empty);
modalddlCategories.Append(@"<select class='custom-select w-100' id='modalddlCategory' required>");
foreach (var category in categories)
{
modalddlCategories.AppendFormat(@"<option value='{0}'>{1}</option>",category.CategoryID,category.Description);
}
modalddlCategories.Append("</select>");
var sb = new StringBuilder(String.Empty);
var userRequest = DBHelpDesk.GetCallByID(requestID);
sb.AppendFormat(@"
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>{0}</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='txtDescription'>Description</label>
<input type='text' class='form-control' id='txtmodalDescription' placeholder='' value='' required>
<div class='invalid-feedback'>
Valid first name is required.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Category</label>
{1}
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Sub-Category</label>
<select class='custom-select w-100' id='modalddlSubCategory' required>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Status</label>
<select class='custom-select w-100' id='modalddlStatus' required>
<option value='0'>Open</option>
<option value='1'>In-Progress</option>
<option value='2'>Awaiting Reply</option>
<option value='3'>Closed</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Request Mode</label>
<select class='custom-select w-100' id='modalddlRequest' required>
<option value='0'>Low</option>
<option value='1'>Medium</option>
<option value='2'>High</option>
<option value='3'>Critical</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12 mb-3'>
<label for='cc-name'>Comments</label>
<textarea id='txtmodalEditor' class='form-control'>{3}</textarea>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-primary'>Update Call</button>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
", DBHelpDesk.GetUserFullName(userRequest.UserID)
, modalddlCategories
, userRequest.Description
, userRequest.Comments);
return sb.ToString();
}
<div>
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../new/request.aspx">
<span data-feather="file"></span>
New Request
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<div class="row">
<div class="col-md-9 mb-3">
<h2>CALL LOG SHEET</h2>
</div>
<div class="col-md-3 mb-3">
<select class="form-control float-right">
<option>Open</option>
<option>Closed</option>
<option>All</option>
</select>
</div>
</div>
<asp:Literal ID="lblContent" runat="server"></asp:Literal>
</main>
</div>
</div>
<div id="modalEditCall" class="modal" tabindex="-1" role="dialog">
<asp:Literal ID="lblModalContent" runat="server"></asp:Literal>
</div>
这是下拉列表
