绑定请使用 jquery ajax 在下拉列表顶部选择答案

【问题标题】：Bind please select on top of dropdown list using jquery ajax绑定请使用 jquery ajax 在下拉列表顶部选择
【发布时间】：2016-09-01 11:48:06
【问题描述】：

Bu 使用 jquery Ajax post 方法我正在调用我的操作方法，从数据库中获取记录并将它们显示在下拉列表中。一切正常。但我想在下拉列表中显示“请选择”作为第一个选项。我尝试了一切，但没有什么对我有利。任何帮助将不胜感激。以下是我的代码：

.cshtml：

<select id="ddlChannelGroupType" name="ddlChannelGroupType">

    </select>

jquery ajax 调用从数据库中获取记录：

   $(document).ready(function () {

        var funcareakey = @ViewBag.UserFuncAreaKey

        $.ajax(
                       {
                           type: "POST",
                           url: "/MappingChannelGroup/GetCHGRPTYPE/",
                           data: {
                               userFunctionalAreaKey: funcareakey
                           },
                           success: function (data) {

                               var items = "";

                               $.each(data, function (i, item) {

                                   items += "<option value='" + item.channelgrptypekey + "'>" + (item.channelgrptype) + "</option>";

                               });

                               $("#ddlChannelGroupType").html(items);

                           }

                       });

    });

我在 Controller 上的 Action 方法：

public JsonResult GetCHGRPTYPE(int userFunctionalAreaKey)
    {
        List<ChannelGrpTypeVM> objCHGRPMST = MappingChannelToGroupRepository.GetChannelGrpTypeByFuncArea(userFunctionalAreaKey);
        return Json(objCHGRPMST);
    }

我对存储库的逻辑：

public static List<ChannelGrpTypeVM> GetChannelGrpTypeByFuncArea(decimal funcareakey)
    {
        BarcDataContext bc = new BarcDataContext();

        var query =
                        (from CHM in bc.XREF_CH_GRP_MST
                         join CGT in bc.REF_CH_GRP_TYPE on CHM.CH_GRP_TYPE_KEY equals CGT.CH_GRP_TYPE_KEY
                         where CHM.SRC_FUNC_KEY == funcareakey
                         select new ChannelGrpTypeVM
                         {
                             channelgrptype = CGT.CH_GRP,
                             channelgrptypekey = CGT.CH_GRP_TYPE_KEY

                         }).Distinct().OrderBy(m => m.channelgrptype).ToList();

        return query;
    }

【问题讨论】：

我没有看到任何关于预先选择其中一个选项的逻辑。您说除此之外一切正常。我认为下拉菜单确实构建正确？
目前默认显示下拉列表中的第一条记录。我想先显示“请选择”文本，当用户单击下拉列表时，它会填充记录。

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

在 $.each 之前添加默认值

success: function (data) {
   var items = "";
   items += "<option value='' disabled selected>Please select</option>";
   $.each(data, function (i, item) {
         items += "<option value='" + item.channelgrptypekey + "'>" + (item.channelgrptype) + "</option>";
   });
   $("#ddlChannelGroupType").html(items);
}

【讨论】：

@N2J 试试

【解决方案2】：

只需更改您的 js：

 // this line
 items += "<option selected='selected' value=''>Please select</option>"; 
 $.each(data, function (i, item) {
    items += "<option value='" + item.channelgrptypekey + "'>" + (item.channelgrptype) + "</option>";
    });   
    $("#ddlChannelGroupType").html(items);

【讨论】：

或者只是把它放在 html 中并在逻辑中使用 append() 而不是 html()。
这也有效，但在最后添加了请选择文本。

【解决方案3】：

尝试添加未显示的选项并使用JS（或默认属性）选择它。

<select default='some-id' id="ddlChannelGroupType" name="ddlChannelGroupType">
    <option value='some-id' className='display-none'>Please Select</option>
    { another options }
</select>

【讨论】：