当组合框中选定的索引发生更改时，如何将此新索引添加到另一个文本框中

本文关键字：索引 新索引 添加 文本 另一个 组合 | 更新日期: 2023-09-27 18:29:22

我的web表单中有两个控件。一个是组合框控件，另一个是文本框。我想做的是，当用户在组合框中选择另一个项目时，新项目会添加到文本框中，并自动显示给用户。

例如：1.当用户在组合框中选择"001"项目时，文本框会在文本区域显示"001"。2.当用户在组合框中选择"002"项目时，文本框显示如下："001"，"02"

这是我的代码：

class webform : System.Web.UI.Page{
    private StringBuilder sb = new StringBuilder();
    protected void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //Todos: Add the selection of combo box to text box2. 
        this.localsb.Append(this.ComboBox1.Text);
        this.localsb.Append(",");
        this.Text2.Text = this.localsb.ToString();
    }
......
}

这是我的前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PCA_Form.aspx.cs" Inherits="WebApplication2.PCA_Form" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PCA_Form</title>
    <style type="text/css">
        #Text1 {
            width: 147px;
            margin-top: 0px;
        }
        #form1 {
            height: 718px;
            width: 963px;
        }
        .auto-style1 {
            font-size: large;
        }
        #Checkbox1 {
            width: 112px;
        }
        #Select1 {
            width: 162px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('.ComboBox1').on('blur', function () {
                if ($(this).prop('checked')) {
                    var initial = $('#Text2').val();
                    var checkbox = $(this).text();
                    $('#Text2').val(initial + ',' + checkbox).change();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div style="height: 51px; width: 906px;" aria-atomic="False" draggable="auto">
            <span class="auto-style1">New Price</span>
            <asp:TextBox ID="Text1"
                runat="server"
                class="Text"
                onkeypress="if (event.keyCode!=46 && (event.keyCode < 48 || event.keyCode >57)) event.returnValue = false;"
                TextMode ="MultiLine">
            </asp:TextBox>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="auto-style1">Item Number</span>
            <ajaxToolkit:ComboBox ID="ComboBox1"
                TextMode="MultiLine"
                runat="server"
                AutoPostBack="True"
                DataSourceID="SqlDataSource1"
                DataTextField="Code"
                DataValueField="Code"
                Style="display: inline;"
                AutoCompleteMode="Suggest"
                DropDownStyle="DropDown"
                OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
            </ajaxToolkit:ComboBox>
            &nbsp; &nbsp;
            <asp:Button ID="Button1"
                Text="submit"
                OnClick="SubmitButton_Click"
                runat="server" />
            &nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button2" runat="server" Text="Excel" OnClick="Button2_Click" />
            &nbsp;&nbsp;&nbsp;
            <asp:TextBox ID="Text2" runat="server" TextMode="MultiLine"></asp:TextBox>
        </div>
        <div style="height: 466px; width: 943px; margin-top: 35px">
            <span class="auto-style1">&nbsp;<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=XXX;Initial Catalog=XXXXX;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Code] FROM [Item]"></asp:SqlDataSource>
            <br />
            <asp:GridView ID="PCADataGrid" runat="server" Width="938px" OnSelectedIndexChanged="PCADataGrid_SelectedIndexChanged" AutoGenerateColumns ="true">
            </asp:GridView>
            </span>
        </div>
    </form>
    <p>&nbsp;</p>
</body>
</html>

在组合框标记中，当用户更改此框中的选择时，我会触发一个名为ComboBox1_SelectedIndexChanged（）的函数。

当组合框中选定的索引发生更改时，如何将此新索引添加到另一个文本框中

这确实是可能的。然而，如果你想避免那些讨厌的Postback的的可爱屏幕闪烁，你的方法将需要更新面板以及随之而来的所有痛苦。我建议在客户端使用JavaScript:

$(document).ready(function() {
     $('.Checkbox').on('blur', function() {
          if($(this).prop('checked')) {
               var initial = $('#txtField').val();
               var checkbox = $(this).text();
               $('#txtField').val(initial + ', ' + checkbox).change();
          }          
     });
});

这有点粗糙，但应该能满足你的需要。这将通过使用Asp.Net页面生命周期来避免您必须引入的问题。希望这能给你指明一个好的方向。

正如我在上面所说的，你的方法将：

  • 需要张贴或更新面板

问题：

  1. Postback-屏幕将闪烁，加上可能会使管理视图状态变得相当困难。

  2. 更新面板-一个痛苦的工作，也会阻碍性能。因为每个"Postback"都成为页面的Ajax调用。它存储在内存中，因此在生命周期中，每个Postback都存储在内存内。所以效率不是很高。

更新：

你问了一个关于的问题

  • .Checkbox
  • #txtField

在前端，在源代码中，您的元素被创建为：

<asp:TextBox 
     id="txtField" runat="server"
     placeholder="Initial Content..." />

您可以在控件上放置更多内容，但为了回答您的问题，它们与您操作的给定元素的Id或Class名称相关。Id只能绑定到单个元素，其中一个类可以用于多个元素。例如

<asp:Checkbox
     id="chkField" runat="server"
     CssClass="Checkbox" />

因此，在这种情况下，.是.Checkbox的锚。下一个将是要锚定到Id、#chkField的#。因此，当您使用JavaScript时，他们会使用$('.Checkbox')或$('#chkField')作为页面上元素的选择器。你明白了吗？

相关文章：