如果用户选择选项，如何更改占位符文本答案

【问题标题】：How to change the placeholder text if user selects an options如果用户选择选项，如何更改占位符文本
【发布时间】：2019-04-19 06:23:59
【问题描述】：

我目前在我的 asp 表单组中有 2 个选项值，其中一个代表国家，另一个代表州/省。有什么办法可以互换文字吗？

For example when user selects canada the placeholder text will be province where when U.S is selected the placeholder will be State.

<form>
<div class="form-group">
     <select asp-for="Country" class="form-control" required="required">
         <option value="Canada">Canada</option>
         <option value="U.S">U.S</option>
      </select>
</div>

<div class="form-group">
    <input asp-for="State" class="form-control" placeholder="Province" />
    <span asp-validation-for="State" class="text-danger"></span>
</div>

<button type="submit"> Submit </button>
<form>

【问题讨论】：

标签： c# asp.net asp.net-mvc forms

【解决方案1】：

您可以使用 jquery 或 javascript 来实现这一点，请查看我下面的代码 sn-p。

<form>
<div class="form-group">
     <select asp-for="Country" id="Country" class="form-control" required="required">
         <option value="Canada">Canada</option>
         <option value="U.S">U.S</option>
      </select>
</div>

<div class="form-group">
    <input asp-for="State" id="State" class="form-control" placeholder="Province" />
    <span asp-validation-for="State" class="text-danger"></span>
</div>

<button type="submit"> Submit </button>
<form>

<script>
  $(document).on("change","#Country",function(){
    var value=$(this).val();
    if(value === "Canada"){
      $("#State").prop("placeholder","Province");
    }
    else if (value === "U.S" ){
      $("#State").prop("placeholder","State");
    }
  });
</script>

【讨论】：

【解决方案2】：

你可以通过多种方式来做，请看下面的代码示例

<form>
<div class="form-group">
    <select asp-for="Country" class="form-control" required="required" id="slCountry" onchange="changeCountry()">
        <option value="Canada">Canada</option>
        <option value="U.S">U.S</option>
    </select>
</div>

<div class="form-group">
    <input asp-for="State" class="form-control" id="txtState" placeholder="Province" />
    <span asp-validation-for="State" class="text-danger"></span>
</div>

<button type="submit"> Submit </button>
</form>

<script>
function changeCountry() {
    if ($("#slCountry").val() == "Canada") {
        document.getElementById("txtState").setAttribute("placeholder", "Province")
    } else {
        document.getElementById("txtState").setAttribute("placeholder", "State")
    }
}
</script>

【讨论】：

【解决方案3】：

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="ddlCountry" runat="server" OnSelectedIndexChanged="Country_SelectedIndexChanged" AutoPostBack="true">
                <asp:ListItem Value="Canada" Text="Canada"></asp:ListItem>
                <asp:ListItem Value="USA" Text="USA"></asp:ListItem>
            </asp:DropDownList>

        </div>
         <br />
            <asp:TextBox ID="txtShow" runat="server"></asp:TextBox>
    </form>
</body>
</html>



    ----------------------------aspx.cs code---------------------------------------

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Country_SelectedIndexChanged(object sender, EventArgs e)
        {
            if(ddlCountry.SelectedValue.ToString() == "USA")
            {
                txtShow.Attributes.Add("Placeholder", "State");
            }

            if (ddlCountry.SelectedValue.ToString() == "Canada")
            {
                txtShow.Attributes.Add("Placeholder", "Province");
            }
        }
    }

【讨论】：