Yii2 ActiveForm实现下拉框切换时修改同属性字段标签

嘿，这个需求我之前也碰到过，给你几个不同技术场景下的实现方案，你可以根据项目情况挑合适的用：

纯前端JavaScript实现（适合静态页面/无后端交互场景） #

这种方案不需要后端支持，纯前端就能搞定：

首先给你的下拉列表和目标标签加上唯一ID，方便JS获取元素：

<select id="commissionType">
  <option value="Percentage">Percentage</option>
  <option value="Amount">Amount</option>
</select>

<label id="vendorCommissionLabel" for="vendorcommission">Percentage</label>
<input type="text" id="vendorcommission" name="vendorcommission">

然后写一段监听下拉选择变化的JS代码，实时修改标签文本：

// 获取页面元素
const commissionSelect = document.getElementById('commissionType');
const commissionLabel = document.getElementById('vendorCommissionLabel');

// 监听下拉框的选择变更事件
commissionSelect.addEventListener('change', function() {
  // 直接把选中的值赋值给标签的文本内容
  commissionLabel.textContent = this.value;
});

ASP.NET Web Forms实现（后端绑定场景） #

如果你的项目是ASP.NET Web Forms，用服务器控件的话，可以这么做：

前端ASPX代码：

<asp:DropDownList ID="ddlCommissionType" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCommissionType_SelectedIndexChanged">
    <asp:ListItem Text="Percentage" Value="Percentage"></asp:ListItem>
    <asp:ListItem Text="Amount" Value="Amount"></asp:ListItem>
</asp:DropDownList>

<asp:Label ID="lblVendorCommission" runat="server" Text="Percentage" AssociatedControlID="txtVendorCommission"></asp:Label>
<asp:TextBox ID="txtVendorCommission" runat="server"></asp:TextBox>

后端C#代码（放在对应的.cs文件里）：

protected void ddlCommissionType_SelectedIndexChanged(object sender, EventArgs e)
{
    // 根据下拉框选中的值更新标签文本
    lblVendorCommission.Text = ddlCommissionType.SelectedValue;
}

Vue.js实现（现代前端框架场景） #

如果用Vue这类框架，双向绑定会更简洁：

<template>
  <div>
    <select v-model="selectedCommissionType">
      <option value="Percentage">Percentage</option>
      <option value="Amount">Amount</option>
    </select>

    <label for="vendorcommission">{{ selectedCommissionType }}</label>
    <input type="text" id="vendorcommission" v-model="vendorCommissionValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCommissionType: 'Percentage', // 默认选中Percentage
      vendorCommissionValue: ''
    }
  }
}
</script>

要是你用的是React、Angular或者其他技术栈，随时说一声，我再给你对应的实现方式～

内容的提问来源于stack exchange，提问作者Dev