如何在VB.NET中捕获HTML输入框文本变更事件并填充下拉框

针对你提供的带runat="server"属性的输入框（ID为txtPositionDt），这里提供两种实用实现方案：

方案一：服务器端回发填充（整页刷新） #

通过触发页面回发，在VB.NET后台代码中处理下拉框填充逻辑。

1. 修改输入框，添加回发触发事件 #

给输入框添加onchange事件，调用ASP.NET内置的__doPostBack方法触发回发：

<input ID="txtPositionDt" runat="server" class="style247" name="txtPositionDt" size="10" tabindex="0" type="text" autocomplete="off" 
       onchange="__doPostBack('txtPositionDt', '')" />

2. 后台VB.NET代码处理回发 #

在页面Page_Load事件中判断回发来源，执行下拉框填充逻辑：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    ' 判断是否为txtPositionDt触发的回发
    If IsPostBack AndAlso Request.Form("__EVENTTARGET") = "txtPositionDt" Then
        FillTargetDropDown()
    End If
End Sub

' 下拉框填充逻辑
Private Sub FillTargetDropDown()
    ' 假设目标下拉框的服务器端ID为ddlTarget
    ddlTarget.Items.Clear()
    
    ' 示例：静态添加选项（实际替换为数据库查询逻辑）
    ddlTarget.Items.Add(New ListItem("选项1", "1"))
    ddlTarget.Items.Add(New ListItem("选项2", "2"))
    
    ' 数据库查询示例（替换为你的连接字符串和SQL语句）
    ' Using conn As New SqlConnection("你的数据库连接字符串")
    '     conn.Open()
    '     Dim cmd As New SqlCommand("SELECT OptionText, OptionValue FROM YourTable WHERE PositionDate = @Date", conn)
    '     cmd.Parameters.AddWithValue("@Date", txtPositionDt.Value)
    '     Dim reader As SqlDataReader = cmd.ExecuteReader()
    '     ddlTarget.DataTextField = "OptionText"
    '     ddlTarget.DataValueField = "OptionValue"
    '     ddlTarget.DataSource = reader
    '     ddlTarget.DataBind()
    ' End Using
End Sub

方案二：AJAX无刷新填充（推荐） #

避免整页刷新，通过前端AJAX调用后台WebMethod获取数据，动态填充下拉框。

1. 前端HTML与JS代码 #

引入jQuery（若页面未引入），编写输入框变更事件的AJAX逻辑：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
    $(function() {
        // 监听输入框文本变更事件
        $("#txtPositionDt").on("change", function() {
            var selectedDate = $(this).val();
            // 发起AJAX请求
            $.ajax({
                type: "POST",
                url: "你的页面文件名.aspx/GetDropDownOptions",
                data: JSON.stringify({ targetDate: selectedDate }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(res) {
                    var ddl = $("#ddlTarget");
                    ddl.empty();
                    // 遍历返回数据，添加下拉选项
                    $.each(res.d, function(idx, item) {
                        ddl.append($("<option>").val(item.Value).text(item.Text));
                    });
                },
                error: function(xhr, status, err) {
                    console.error("获取下拉选项失败：" + err);
                }
            });
        });
    });
</script>

<!-- 目标下拉框（需带runat="server"） -->
<select ID="ddlTarget" runat="server" class="stylexxx"></select>

2. 后台VB.NET WebMethod代码 #

添加静态WebMethod用于返回下拉框数据：

Imports System.Web.Services

Partial Class 你的页面类名
    Inherits System.Web.UI.Page

    <WebMethod()>
    Public Shared Function GetDropDownOptions(targetDate As String) As List(Of ListItem)
        Dim options As New List(Of ListItem)()
        
        ' 示例：根据日期生成选项（实际替换为数据库查询逻辑）
        options.Add(New ListItem($"[{targetDate}] 选项A", "A"))
        options.Add(New ListItem($"[{targetDate}] 选项B", "B"))
        
        ' 数据库查询示例
        ' Using conn As New SqlConnection("你的数据库连接字符串")
        '     conn.Open()
        '     Dim cmd As New SqlCommand("SELECT OptionText, OptionValue FROM YourTable WHERE PositionDate = @Date", conn)
        '     cmd.Parameters.AddWithValue("@Date", targetDate)
        '     Dim reader As SqlDataReader = cmd.ExecuteReader()
        '     While reader.Read()
        '         options.Add(New ListItem(reader("OptionText").ToString(), reader("OptionValue").ToString()))
        '     End While
        ' End Using
        
        Return options
    End Function
End Class

内容的提问来源于stack exchange，提问作者VimalSingh