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

Question

我尝试在 DropdownList 更改时填充 2 个文本框。

文本框 1 中的文本是 ID_1 的名称。
文本框 2 中的文本是 ID_1 的年龄

如果我在下拉列表中选择其他选项，文本框 1 和文本 2 中的文本将被更改。

例如，

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

这是我的数据库。

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

我的 .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>

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

解决方案。

** 请点击此链接查看如何拆分数据：**
How to split the string using jQuery or 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>

Answer 1

解决方案 #1：下拉列表值

此解决方案将要求您将相关信息存储在下拉列表的值和键属性中。因此，您的 SQL 语句需要如下所示：Select (Name + ';' + age) NameAge, Id from [table]

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

解决方案 #2：隐藏参考值

不太理想，但取决于您的情况。

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

此解决方案通常需要jquery/javascript 才能执行，因为数据通常会存储为json。不过，您可以进行分层 CSV 类型设计。