在組合框中更改所選索引后，如何將此新索引添加到另一個文本框中？

Question

我的網絡表單中有兩個控件。 一個是組合框控件，另一個是文本框。 我想做的是，當用戶在組合框中選擇另一個項目時，新項目將添加到文本框中並自動顯示給用戶。

例如：1.當用戶在組合框中選擇“ 001”項目時，文本框在文本區域顯示“ 001”。 2.當用戶在組合框中選擇“ 002”項時，文本框顯示如下：“ 001”，“ 002”

這是我的代碼：

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（）的函數。

Answer 1

好吧，那確實是可能的。 但是，如果您想避免那些討厭的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頁面生命周期而不得不引入的問題。 希望這為您指明了正確的方向。

正如我上面所說的，您的方法將：

需要回發或更新面板

問題：

回發-屏幕將閃爍，而且會使管理視圖狀態變得相當困難。
更新面板-使用起來很麻煩，也會影響性能。 隨着每個“回發”成為頁面的Ajax調用。 它存儲在內存中，因此每個回發都將在生命周期內存儲在內存中。 所以它不是很有效。

更新：

您問了一個有關以下問題：

.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')作為頁面上元素的選擇器 。 這對您有幫助嗎？

在組合框中更改所選索引后，如何將此新索引添加到另一個文本框中？

問題描述

1 個解決方案

解決方案1
2 2014-11-05 23:39:51

在組合框中更改所選索引后，如何將此新索引添加到另一個文本框中？

問題描述

1 個解決方案

解決方案1 2 2014-11-05 23:39:51

解決方案1
2 2014-11-05 23:39:51