选择字段未显示下拉值

Posted 2023-03-27

【中文标题】选择字段未显示下拉值

【英文标题】：Select field is not showing the dropdown values

【发布时间】：2021-03-17 17:57:58

【问题描述】：

谁能帮帮我，这两天我被困住了。我是 Knockoutjs / viewmodel 的新手。我试图了解如何将数据绑定到下拉列表。需要根据在另一个字段中输入的值（这基本上是 API 返回下拉值的输入参数）通过 API 从数据库中提取下拉值。返回数据的 API 如下所示

[HttpPost]
    public JsonResult GetGInfo(string sNumber)
    
        try
        
            DSRepository dsr = new DSRepository();
            List<String> gTypeList = dsr.GetDDInfo(sNumber);
            if (gTypeList != null)
                return Json(gTypeList);
            else
                return null;    
        
        catch (Exception e)
        
            return null;
        

下面是两个字段

 // this value should be passed in to the API to retrieve the dropdown list 
 self.sNumber= ko.observable().extend( required:  params: true, message: "Required!"  ); 
 //Dropdown list field 
 self.gType= ko.observable().extend( required: true );

  //function for making a call to the API 
  self.getGTypes = function (data, event) 
    $.ajax(
        url: '/REQ/GetGInfo',
        type: 'POST',
        data: 
            sNumber: self.sNumber()
        ,
        success: function (response) 
            if (response.length < 1)
                console.log("Record retrieved successfully");
        ,
        error: function (errorThrown) 
            console.log("Error retrieving the record");
        
    )
   ; 

UI 如下所示

<div class="form-group required">
<label for="SNumber" class="control-label">SNumber:</label>
<input type="number" id="SNumber" class="form-control" data-bind="event: change: getGTypes, value: sNumber">
</div>

<div class="form-group required">
<label for="GType" class="control-label">GType</label>
<select id="GType" name="GType" class="form-control" data-bind="options: getGTypes, value: gType, optionsCaption: 'Select'"></select>
</div>
</div>

因此，当在 SNumber 字段中输入值时，调用 getGenoTypes 我看到数据是通过调试从 API 返回的，对于我输入的数字，我看到下面的数据 gTypeList 是从返回的接口

但在下拉列表中我什么也看不到

请帮助我，我在这里完全想念什么

【参考方案1】：

您实际上需要保存您从视图模型上的 API 收到的下拉值。您不能只执行 API 调用并期望 Knockout 神奇地理解它需要使用（异步）响应数据来填充选择列表。

所以基本上，你需要做这样的事情：

// this value should be passed in to the API to retrieve the dropdown list 
self.sNumber = ko.observable().extend( required:  params: true, message: "Required!"  ); 
//Dropdown list field 
self.gType = ko.observable().extend( required: true );
// Dropdown list values
self.gTypes = ko.observableArray();

//function for making a call to the API 
self.getGTypes = function (data, event) 
    $.ajax(
        url: '/REQ/GetGInfo',
        type: 'POST',
        data: 
            sNumber: self.sNumber()
        ,
        success: function (response) 
            self.gTypes(response);
        ,
        error: function (errorThrown) 
            console.log("Error retrieving the record");
        
    )
; 

<select id="GType" name="GType" class="form-control" data-bind="
    options: gTypes,
    value: gType,
    optionsCaption: 'Select'"></select>

请注意，我不知道 response 是什么样子，所以这可能不是 100% 正确，但我希望你能明白。

【讨论】：

非常感谢，过去两天我一直受困于此。没有意识到我错过了这样的东西来存储响应