![](/img/trans.png)
[英]Comparing a Selected Index Combo Box to another Selected Index Combo Box
[英]When selected index changed in combo box, how to add this new index to another text box?
我的网络表单中有两个控件。 一个是组合框控件,另一个是文本框。 我想做的是,当用户在组合框中选择另一个项目时,新项目将添加到文本框中并自动显示给用户。
例如: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>
<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>
在组合框标记中,当用户在此框中更改选择时,我会触发一个名为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页面生命周期而不得不引入的问题。 希望这为您指明了正确的方向。
正如我上面所说的,您的方法将:
问题:
回发-屏幕将闪烁,而且会使管理视图状态变得相当困难。
更新面板-使用起来很麻烦,也会影响性能。 随着每个“回发”成为页面的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')
作为页面上元素的选择器 。 这对您有帮助吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.