如何通过更改下拉列表填写2个文本框？

I have tried to fill 2 text boxes when a DropdownList changed.

The text in text box 1 is Name of ID_1.
The text in text box 2 is Age of ID_1

And if I choose another choices in the dropdownlist, the text in text box 1 and text 2 will be changed.

For example,

当DropdownList发生变化时,我试图填充2个文本框。文本框1中的文本是ID_1的名称。文本框2中的文本是年龄ID_1如果我在下拉列表中选择其他选项,则文本框1和文本2中的文本将被更改。例如,

+----+-----------+--------------+--------------+
| Dropdownlist   | TextBox1     | TextBox2     | 
+----------------+--------------+--------------+
| 1              | John         | 23           |
+----------------+--------------+--------------+
| 2              | Vivian       | 43           |
+----------------+--------------+--------------+

This is my database.

这是我的数据库。

+----+-----------+--------------+
| id | Name      | Age          | 
+----+-----------+--------------+
| 1  | John      | 23           |
+----+-----------+--------------+
| 2  | Vivian    | 43           |
+----+-----------+--------------+

My code from .aspx

我的代码来自.aspx

$('#<%:DropDownA.ClientID%>').change(function () {
  changeData();
});

function changeData() {
  var txt1 = $('#<%:DropDownA.ClientID%>').val();
  var txt2 = $('#<%:DropDownA.ClientID%>').val();
  $('input[id="TextBox1"]').val(txt1);
  $('input[id="TextBox2"]').val(txt2);
};

changeData();

<asp:DropDownList ID="DropDownA" runat="server" CssClass="form-control" DataSourceID="SqlDataFromDatabase" DataTextField="id" DataValueField="name"></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataFromDatabase" runat="server" ConnectionString="<%$ ConnectionStrings:asrsDBConnectionString %>" SelectCommand="SELECT * FROM [table]"></asp:SqlDataSource>


<input class="form-control" id="TextBox1" value="xxxx" type="text" style="color: green;" disabled>
<input class="form-control" id="TextBox2" value="xxxx" type="text" style="color: green;" disabled>

Thank you in advance for giving me the solution or suggestion.

提前感谢您给我解决方案或建议。

The Solution.

** Please follow this link for checking how to split the data: **
How to split the string using jQuery or JavaScript?

解决方案。 **请按照此链接检查如何拆分数据:**如何使用jQuery或JavaScript拆分字符串?

$('#<%:DropDownA.ClientID%>').change(function () {
  changeData();
});

function changeData() {
  var data1 = $('#<%:DropDownA.ClientID%>').val();
  var arr = data1.split(';');
  $('input[id="TextBox1"]').val(arr[0]);
  $('input[id="TextBox2"]').val(arr[1]);
};

changeData();

<asp:DropDownList ID="DropDownA" runat="server" CssClass="form-control" DataSourceID="SqlDataFromDatabase" DataTextField="id" DataValueField="name"></asp:DropDownList>
<asp:SqlDataSource ID="SqlDataFromDatabase" runat="server" ConnectionString="<%$ ConnectionStrings:asrsDBConnectionString %>" SelectCommand="Select (Name + ';' + Age) NameAge, id from [table]"></asp:SqlDataSource>


<input class="form-control" id="TextBox1" value="xxxx" type="text" style="color: green;" disabled>
<input class="form-control" id="TextBox2" value="xxxx" type="text" style="color: green;" disabled>

1 个解决方案

#1

Solution #1: Drop-Down List Value

This solution would require you to store the pertinent information in the Value & Key attributes of the Drop Down List. So your SQL statement would need to look like this: Select (Name + ';' + age) NameAge, Id from [table]

此解决方案要求您将相关信息存储在下拉列表的“值和键”属性中。所以你的SQL语句需要如下所示:从[table]中选择(Name +';'+ age)NameAge,Id

With this SQL Statement, you could then change your DropDownList DataValueField field to NameAge and split the key-value pair on SelectIndexChanged event to fill the two associated TextBoxe, when the PostBack occurs

使用此SQL语句,您可以将DropDownList DataValueField字段更改为NameAge并在SelectIndexChanged事件上拆分键值对以填充两个关联的TextBoxe,当发生PostBack时

Solution #2: Hidden reference values

Less ideal but will depend on your situation.

不太理想但会取决于你的情况。

Basically, you have a Hidden Input field that holds ALL possible meta-data for the DropDown List and based on selection the pertinent information is extracted for further use in other locations. Think of this like a Flat-file style storage mechanism.

基本上,您有一个隐藏输入字段,其中包含DropDown列表的所有可能元数据,并根据选择提取相关信息以供在其他位置进一步使用。可以把它想象成平面文件样式的存储机制。

This solution usually will require jquery/javascript to perform, as the data would generally be stored as json. Although, you could do a hierarchical CSV type design.

此解决方案通常需要执行jquery / javascript,因为数据通常存储为json。虽然,您可以进行分层CSV类型设计。