When selected index changed in combo box, how to add this new index to another text box?
Question
I have two controls in my web form. One is combo box control, and the other is text box. What I want to do is when user selects another item in combo box, the new item is added to text box and shown to user automatically.
For example: 1. When user select '001' item in combo box, text box shows '001' in text area. 2. When user select '002' item in combo box, text box shows like this: '001','002'
Here is my code:
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();
}
......
}
Here is my front end code:
<%@ 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>
<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>
<asp:Button ID="Button1"
Text="submit"
OnClick="SubmitButton_Click"
runat="server" />
<asp:Button ID="Button2" runat="server" Text="Excel" OnClick="Button2_Click" />
<asp:TextBox ID="Text2" runat="server" TextMode="MultiLine"></asp:TextBox>
</div>
<div style="height: 466px; width: 943px; margin-top: 35px">
<span class="auto-style1"> <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> </p>
</body>
</html>
In combo box tag, I trigger a function called ComboBox1_SelectedIndexChanged() when user changes selection in this box.
1 answers
solution1
2 2014-11-05 23:39:51
Well, that is indeed possible. However, your approach will require an Update Panel and all the agony that follows if you intend to avoid the lovely screen-flicker from those pesky Postback's . I would recommend doing this client side with 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();
}
});
});
That is a bit crude and rough, but it should meet your needs. This will avoid the issues your bound to introduce by using the Asp.Net Page Life Cycle . Hopefully this points you in good direction.
As I said above your approach will:
- Require Postback or Update Panel
Problem:
Postback - Screen will flicker, plus can make managing View State quite difficult.
Update Panel - A pain to work with, also will hinder performance. As each 'Postback' becomes an Ajax call of the page. Which is stored in memory, so every Postback becomes stored in memory during the life-cycle. So it isn't very efficient.
Update:
You asked a question about:
-
.Checkbox -
#txtField
On your front-end, in source code your elements are created like:
<asp:TextBox
id="txtField" runat="server"
placeholder="Initial Content..." />
There are more you can place on the control, but to answer your question they correlate to the Id or Class name for the given element your manipulating. An Id can only be bound to a single element, where a class can be used on several elements. For example-
<asp:Checkbox
id="chkField" runat="server"
CssClass="Checkbox" />
So in this instance the . is an anchor on this case, .Checkbox . The next would be # which is to anchor to the Id , #chkField . So when you use JavaScript they use the $('.Checkbox') or $('#chkField') as the Selector to elements on your page. Does that clarify for you?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.