You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ASP.NET C#:输入机场码后下拉框保留全量项并选中对应机场名

我来帮你搞定这个问题!你想要的是输入机场码后自动选中下拉框里对应的选项,同时保留所有机场选项供用户手动选择,而不是像现在这样只显示匹配的那一个。下面是具体的实现方案:

核心思路

  1. 先把所有机场的完整数据(包含PORT_CODEPORT_NAME)绑定到下拉框,确保用户点击下拉框时能看到全量选项;
  2. 根据用户输入的机场码,在已绑定的下拉框选项中找到对应的项,设置为选中状态;
  3. (可选)用前端JS实现实时匹配,不用点击按钮就能自动选中,提升用户体验。

后端代码修改

首先,你需要新增一个获取全量机场数据的方法,替换原来只查单个匹配项的逻辑:

public DataSet get_All_MST_SHIPPING_PORTS()
{
    try
    {
        cmd.Parameters.Clear();
        // 查询所有机场的CODE和NAME,方便后续匹配和显示
        string sql = "select PORT_CODE, PORT_NAME from MST_SHIPPING_PORT";
        cmd.CommandText = sql;
        OpenConnection();
        DataSet ds = new DataSet();
        da = new SqlDataAdapter(sql, con);
        da.SelectCommand = cmd;
        da.Fill(ds);
        return ds;
    }
    catch (Exception ex)
    {
        // 这里可以添加异常日志记录逻辑
        throw ex;
    }
    finally
    {
        // 务必关闭数据库连接,避免连接泄漏
        CloseConnection();
    }
}

然后修改按钮点击事件的代码,先绑定全量选项,再根据输入的码选中目标项:

// 获取所有机场的全量数据
DataSet ds = _exportbll.get_All_MST_SHIPPING_PORTS();
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
    // 绑定全量数据到下拉框
    ddlportto.DataSource = ds.Tables[0];
    ddlportto.DataTextField = "PORT_NAME"; // 显示给用户的文本
    ddlportto.DataValueField = "PORT_CODE"; // 用唯一的CODE作为值,匹配更准确
    ddlportto.DataBind();

    // 根据用户输入的code查找并选中对应的选项
    if (!string.IsNullOrEmpty(code))
    {
        ListItem targetItem = ddlportto.Items.FindByValue(code);
        if (targetItem != null)
        {
            targetItem.Selected = true;
            lbl_msg.Text = ""; // 清空错误提示
        }
        else
        {
            lbl_msg.Text = "Invalid Code";
        }
    }
}
else
{
    lbl_msg.Text = "No airports found in database";
}

前端实时匹配优化(可选)

如果想让用户输入机场码时不用点击按钮,就能自动选中对应的选项,可以添加一段JavaScript代码:

// 假设你的文本框ID是txtAirportCode,下拉框ID是ddlportto
document.getElementById('txtAirportCode').addEventListener('keyup', function() {
    const inputCode = this.value.trim().toUpperCase(); // 统一大小写,避免大小写不匹配
    const dropdown = document.getElementById('ddlportto');
    let isFound = false;

    // 遍历下拉框选项,匹配机场码
    for (let i = 0; i < dropdown.options.length; i++) {
        if (dropdown.options[i].value === inputCode) {
            dropdown.selectedIndex = i;
            isFound = true;
            break;
        }
    }

    // 根据匹配结果更新提示信息
    const msgLabel = document.getElementById('lbl_msg');
    if (!isFound) {
        msgLabel.textContent = "Invalid Code";
        dropdown.selectedIndex = -1; // 清空选中状态
    } else {
        msgLabel.textContent = "";
    }
});

注意事项

  • 一定要在finally块中关闭数据库连接,防止连接池耗尽;
  • PORT_CODE作为下拉框的DataValueField,因为它是唯一标识,避免出现机场名重复导致匹配错误的情况;
  • 如果你的项目是ASP.NET WebForms,要确保控件的ClientIDMode设置为Static,否则前端JS可能找不到控件(或者用<%= txtAirportCode.ClientID %>获取控件的客户端ID)。

内容的提问来源于stack exchange,提问作者Krupesh03

火山引擎 最新活动