綁定請使用jquery ajax在下拉列表頂部選擇

使用jQuery的Aj Ajax post方法我打電話給我的操作方法，從數據庫中提取記錄並將它們顯示在下拉列表中。一切工作正常。但我想在下拉列表中顯示「請選擇」作爲第一個選項。我嘗試了一切，但沒有任何工作對我有利。任何幫助將非常感激。下面是我的代碼：綁定請使用jquery ajax在下拉列表頂部選擇

.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); 

          } 

         }); 

    });

控制器上的我的操作方法：

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; 
    }

來源

2016-05-06 N2J

我沒有看到有關預先選擇其中一個選項的邏輯。你說除了那個之外，一切都在運轉。我認爲下拉確實正確地建立了？ – Taplar

目前它默認顯示下拉列表中的第一條記錄。我想首先顯示「請選擇」文本，當用戶單擊下拉列表時，它會填充記錄。 – N2J

添加默認值之前$。每個

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); 
}

來源

2016-05-06 12:05:57 Xavr

@ Xavr-它的工作..謝謝很多... :) – N2J

@ N2J嘗試如果你不喜歡我不想在列表中看到它 – Xavr

只是改變你的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);

來源

2016-05-06 12:03:37

或者只是把它放在html中，並在邏輯中使用append（）而不是html（）。 – Taplar

@Taplar這種方式也工作，同意 –

這也工作，但添加顯示請選擇文本在最後。 – N2J

嘗試添加非顯示的選項，並使用JS（或默認屬性）選擇它。

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

來源

2016-05-06 12:07:56

綁定請使用jquery ajax在下拉列表頂部選擇

回答

相關問題