时间戳

首页 > 解决方案 > 从选择到输入自动填充数据

c# - 从选择到输入自动填充数据

问题描述

当我在“选择”中选择某些内容时，我需要自动填充输入

public SomeModel : ISelectable
{
   public int Id {get;set}
   public string Name {get;set}
   public string ShortName {get;set}
   public string Info {get;set}
}

public IEnumerable<SelectItem> CountriesSelect {get;set;}
public List<SomeModel> CountriesList {get;set;}

在cshtml中我有

@Model型号名称

在模型名称中，我有CountrySelect和 CountryList

<select id="mainselect" asp-items="CountriesSelect"></select>

<input id="name" /> 
<input id="shortname" />
<input id="info" />

如何实现从国家列表自动填充到选择更改或类似这样的输入

标签： c#asp.net-mvcasp.net-core

解决方案

我认为使用 JQuery 可以解决您的问题。只需监听 onchange 事件并编辑 dom 元素。

在我的 index.cshtml 中，我导入了 jquery，这是我的测试结果：

@model WebApplication1.Models.HomeModelView
@{
    ViewData["Title"] = "Home Page";
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div>
    <select asp-for="@Model.City.LocationId" asp-items="(@ViewData["city"] as IEnumerable<SelectListItem>)" id="SubLocation_Id" class="form-control ">
        <span asp-validation-for="@Model.City.LocationId"></span>
        @foreach (var item in ViewBag.city)
        {
            <option value="@item.LocationId&&@item.Title&&@item.SubLocation_Id">@item.Title</option>

        }
    </select>
    <input id="locationid" type="text" />
    <input id="title" type="text" />
    <input id="subid" type="text" />
</div>

<script>
    $("#SubLocation_Id").change(function () {
        var selectedid = $("#SubLocation_Id option:selected").val().split("&&");
        var locationid = selectedid[0];
        var title = selectedid[1];
        var subid = selectedid[2];
        $('#locationid').val(locationid);
        $('#title').val(title);
        $('#subid').val(subid);
    });
</script>

推荐阅读