根据文本框值隐藏或显示下拉菜单

Question

我已经在我的ASP.NET核心MVC网站上创建了一个注册表，我要求用户提供邮政编码以及其他用户信息。

如果只有一个县与邮政编码相关联，我不想显示用于选择县下拉列表，否则如果有多个县，我希望向用户显示用于选择县的下拉列表。

public class RegisterUser
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string BirthDate { get; set; }
    public string EmailAddress { get; set; }
    public string ZipCode { get; set; }
    public string County { get; set; }
}

视图：

<form asp-action="Register" method="post" asp-controller="User" asp-antiforgery="true">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="FirstName" class="control-label col-sm-3"></label>
        <div class="col-md-9">
            <input asp-for="FirstName" class="form-control text-box single-line input-validation-error" />
            <span class="text-danger field-validation-error" asp-validation-for="FirstName"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="LastName" class="control-label col-sm-3"></label>
        <div class="col-md-9">
            <input asp-for="LastName" class="form-control text-box single-line input-validation-error" />
            <span class="text-danger field-validation-error" asp-validation-for="LastName"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="BirthDate" class="control-label col-sm-3"></label>
        <div class="col-md-9">
            <input asp-for="BirthDate" class="form-control text-box single-line input-validation-error" />
            <span class="text-danger field-validation-error" asp-validation-for="BirthDate"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="EmailAddress" class="control-label col-sm-3"></label>
        <div class="col-md-9">
            <input asp-for="EmailAddress" class="form-control text-box single-line input-validation-error" />
            <span class="text-danger field-validation-error" asp-validation-for="EmailAddress"></span>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="ZipCode" class="control-label col-sm-3"></label>
        <div class="col-md-9">
            <input asp-for="ZipCode" class="form-control text-box single-line input-validation-error" />
            <span class="text-danger field-validation-error" asp-validation-for="ZipCode"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12 button-holder">
            <input type="submit" value="Continue" class="button-green btn btn-default pull-right" />
        </div>
    </div>
</form>

在这种情况下该怎么做？我还没有在这里添加我的下拉逻辑。

Answer 1

您只需要一些JavaScript，可能还需要一些AJAX。基本上，您绑定到邮政编码输入的input/blur事件。然后，您的代表将根据某种类型的逻辑隐藏下拉菜单或显示下拉菜单。

要确定哪些国家“属于”特定的邮政编码，您将需要一个端点(ASP.NET核心操作)，该端点可以接受邮政编码作为参数，然后使用它来查找相关的国家。然后以JSON的形式返回该国家/地区列表。

当然，然后您需要通过AJAX传递邮政编码来请求此端点。然后，您的"success“委托将获取返回的JSON，并使用该JSON构建下拉选项，然后显示下拉选项(假设存在多个项)。如果只有一项，您要么什么都不做，要么隐藏下拉菜单(如果它当前正在显示)。

您可以考虑使用Knockout.js、Vue.js等库，因为它需要大量的手动工作。长话短说，做一些研究，尝试一下，如果你有其他问题或遇到问题，你可以回来问另一个问题。