MVC：Razor：将 SelectList 的 SelectedValue 绑定到文本框答案

【问题标题】：MVC: Razor: Bind SelectList's SelectedValue to textboxMVC：Razor：将 SelectList 的 SelectedValue 绑定到文本框
【发布时间】：2020-07-27 21:08:09
【问题描述】：

我有一个模型和一个带有选择和几个文本框的视图。我正在尝试通过以下方式将文本框值绑定到选定的列表项：

型号：

public class Items
{
    public string ID { get; set; }
    public string Name { get; set; }        
    public SelectList ItemList { get; set; }
    public List<SelectListData> MiscList { get; set; }
}

public class SelectListData{
    public string ID { get; set; }
    public string Name { get; set; }
    public string Address{get; set;}
    public string City{get; set;}
    public string State{get; set;}

}
Controller:

控制器：

public async public async Task<IActionResult> Index()
{
    Items viewModel = new Items();
    
    List<SelectListData> tempLIst = new List<SelectListData>();
    tempLIst.Add(new SelectListData() { ID = "1", Name = "ID-1", Address="123 AVE", City = "New City", State = "CA"});
    tempLIst.Add(new SelectListData() { ID = "2", Name = "ID-2", Address="234 AVE", City = "New City", State = "CA"});
    tempLIst.Add(new SelectListData() { ID = "3", Name = "ID-3", Address="345 AVE", City = "New City", State = "CA"});
    tempLIst.Add(new SelectListData() { ID = "4", Name = "ID-4", Address="456 AVE", City = "New City", State = "CA"});
    
    
    viewModel.ItemList = new SelectList(tempLIst, "ID", "Name", 2);
    viewModel.SelectListData = tempLIst;
    return View(viewModel);
}
View:

@Model Items
<div class="form-group">

    <label class="col-lg-2 control-label">Account</label>
    <div class="col-lg-10">
        <div class="input-group col-lg-10">
            <span class="input-group-addon">
                <i class="fa fa-globe" aria-hidden="true"></i>
            </span>

            <select asp-for="ID" asp-items="@Model.ItemList" class="form-control" onchange="OnSelectedIndexChanged_01(this)"></select>                
        </div>
        @{                 
            if(Model.ID != null) {
                var selectedAddress = Model.MiscList.SingleOrDefault(c => c.ID == Model.ID).Address;
            }
        }
        
        <div>
            <input id="selAddress" value="@selectedAddress" />   =====? how do I set the value to selectedAddress here?             
        </div>
        

    </div>
</div>

<script>
    function OnSelectedIndexChanged_01(value, jsdata) {
        var selectedID = value.options[value.selectedIndex].value;
    var selectedText = value.options[value.selectedIndex].text;
    var myArray = [];
    var jsdata = @Json.Serialize(@Model.MiscList.ToList()); ===? this is being assigned correctly
    //myArray = JSON.parse(jsdata); ===> this line throws "Unexpected token o in JSON at position 1"; commenting this worked out
    //myArray = jsdata;
    console.log("[" + selectedID + "] [" + jsdata + "] [" + myArray + "]"); ===> this line is printing [[object, object], [object, object], [object, object]]
    //console.log("[" + selectedID + "] [" + jsdata + "]");
    for (var i = 0; i < myArray.length; i++) {
        if (myArray[i].ID == selectedID) {
            var Address = document.getElementById("selAddress");
            Address.value = "";
            Address.value = myArray[i].Address.toString();
            break;
        }
    }
    }
</script>

我正在尝试将下拉列表的 selectedValue 绑定到选定的地址。任何帮助表示赞赏。

编辑：正如稻草人所指出的，我能够绑定初始值。另一个问题：我的 javascript 似乎没有根据下拉列表的 OnChange 事件填充地址文本。我不确定我是否正确传递了模型的数组列表。任何指针都是有帮助的。

谢谢 NH

【问题讨论】：

标签： javascript razor

【解决方案1】：

请在视图中尝试以下代码片段：对您的代码进行了更改

 @model Items; 
 @{var selectedAddress=string.Empty;}
<div class="form-group">

    <label class="col-lg-2 control-label">Account</label>
    <div class="col-lg-10">
        <div class="input-group col-lg-10">
            <span class="input-group-addon">
                <i class="fa fa-globe" aria-hidden="true"></i>
            </span>

            <select asp-for="ID" asp-items="@Model.ItemList" class="form-control"></select>                
        </div>
        @{                 
            if(Model.ItemList != null) {
                 selectedAddress = Model.MiscList.SingleOrDefault(c => c.ID == Model.ItemList.SelectedValue.ToString()).Address;
            }
        }
        
        <div>
             <input id="selAddress" value="@selectedAddress" />   

        </div>
        

    </div>
</div>

我相信你设置的选中项

if(Model.ItemList != null) {
                 selectedAddress = Model.MiscList.SingleOrDefault(c => c.ID == Model.ItemList.SelectedValue.ToString()).Address;
            }

而不是代码中的 Model.ID。

Dropdown change事件可以通过如下Javascript代码sn-p实现：

$(document).ready(function () {
        $('#ID').change(function () {
            var selectedValue = $(this).val();
            var misclist = @Json.Serialize(@Model.MiscList.ToList());
            for(i=0;i<misclist.length;i++){
                if(misclist[i].id == selectedValue) {
                    $('#selAddress').val(misclist[i].address);
                    break;
                }
            }
            
         });
     });

【讨论】：

非常感谢！您的代码有助于显示初始值。现在，我需要为下拉列表实现 OnChange 事件以填充值。
使用下拉更改事件更新了答案。如果对您有用，请尝试@SoftwareDveloper 请保持保持原样并添加 javascript 部分中的代码。
感谢您的帮助。我正在尝试使用您的代码，当我尝试显示 miscList 的内容时，我得到 [[object, object], [object]] 而不是实际值。
@Json.Serialize(@Model.MiscList.ToList()) 是这样做的吗？希望这也一样。没有变化。
希望您不要更改控制器中的任何其他代码。

【解决方案2】：

我的问题有 2 个问题。 @ScareCrow 为我的第一个问题提供了解决方案，并帮助我找出了第二个问题的解决方案。这是一个更新的 javascript 函数（键值为小写）：

function OnSelectedIndexChanged_01(value, jsdata) {
    var selectedID = value.options[value.selectedIndex].value;
var selectedText = value.options[value.selectedIndex].text;
var myArray = [];
var jsdata = @Json.Serialize(@Model.MiscList.ToList()); 
//myArray = JSON.parse(jsdata); ===> this line throws "Unexpected token o in JSON at position 1"; commenting this worked out; jsdata is already a javascript object
myArray = jsdata; 
for (var i = 0; i < myArray.length; i++) {
    if (myArray[i].id == selectedID) {
        var Address = document.getElementById("selAddress");
        Address.value = "";
        Address.value = myArray[i].address.toString();
        break;
    }
}
}

【讨论】：