C# MVC4中的级联下拉列表？

嗨，我的视野中有两个drodown客户姓名和联系人。如果选择客户姓名，则必须在联系人下拉列表中自动加载与客户姓名相关的联系人。我完成了此任务。它工作得很好

我的输出将与下图中提到的相同

现在我需要的是我想改变输出的格式

我需要改变我的输出格式，就像第二张图中提到的那样。也就是说，如果我在下拉列表中选择值，则表示每个下拉列表包含第一个值，请选择。每个下拉列表中都需要这个。我尝试了很多方法，但没有为我的代码找到正确的解决方案。请任何人给我这个任务的解决方案

我的控制器代码

  public JsonResult GetCustomers()
    {
        return Json(db.Customers.ToList(), JsonRequestBehavior.AllowGet);
    }

   public JsonResult GetContactPersobByCustomerId(string customerId)
    {
        Guid Id = Guid.Parse(customerId);
        var customercontacts = (from a in db.CustomerContacts where a.CustomerID == Id select a);
        return Json(customercontacts, JsonRequestBehavior.AllowGet);
    }

  @Html.Label("Customer Name", new { @class = "control-label" })
  @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

 @Html.Label("Contact Person", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })

  <script>
    $(function () {
    $.ajax(
   '@Url.Action("GetCustomers", "VisitorsForm")',{
            type: "GET",
            datatype: "Json",
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
                });
            }
        });


          $('#CustomerID').change(function () {
        $('#CustomerContactID').empty();

        $.ajax(
             '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
                type: "POST",
                datatype: "Json",
                data: { CustomerID: $('#CustomerID').val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                 $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');

              });
            }
         });
     });
 });  

我的视图代码

  public JsonResult GetCustomers()
    {
        return Json(db.Customers.ToList(), JsonRequestBehavior.AllowGet);
    }

   public JsonResult GetContactPersobByCustomerId(string customerId)
    {
        Guid Id = Guid.Parse(customerId);
        var customercontacts = (from a in db.CustomerContacts where a.CustomerID == Id select a);
        return Json(customercontacts, JsonRequestBehavior.AllowGet);
    }

  @Html.Label("Customer Name", new { @class = "control-label" })
  @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

 @Html.Label("Contact Person", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })

  <script>
    $(function () {
    $.ajax(
   '@Url.Action("GetCustomers", "VisitorsForm")',{
            type: "GET",
            datatype: "Json",
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
                });
            }
        });


          $('#CustomerID').change(function () {
        $('#CustomerContactID').empty();

        $.ajax(
             '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
                type: "POST",
                datatype: "Json",
                data: { CustomerID: $('#CustomerID').val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                 $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');

              });
            }
         });
     });
 });  

我的Json代码

  public JsonResult GetCustomers()
    {
        return Json(db.Customers.ToList(), JsonRequestBehavior.AllowGet);
    }

   public JsonResult GetContactPersobByCustomerId(string customerId)
    {
        Guid Id = Guid.Parse(customerId);
        var customercontacts = (from a in db.CustomerContacts where a.CustomerID == Id select a);
        return Json(customercontacts, JsonRequestBehavior.AllowGet);
    }

  @Html.Label("Customer Name", new { @class = "control-label" })
  @Html.DropDownListFor(model => model.CustomerID, new SelectList(string.Empty, "Value", "Text"), "Please select a Customer", new { @class = "form-control required", type = "text" })

 @Html.Label("Contact Person", new { @class = "control-label" })
 @Html.DropDownListFor(model => model.CustomerContactID, new SelectList(string.Empty, "Value", "Text"), "Please select a ContactPerson", new { @class = "form-control", type = "text", id = "CustomerContactID" })

  <script>
    $(function () {
    $.ajax(
   '@Url.Action("GetCustomers", "VisitorsForm")',{
            type: "GET",
            datatype: "Json",
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#CustomerID').append('<option value="' + value.CustomerID + '">' + value.DisplayName + '</option>');
                });
            }
        });


          $('#CustomerID').change(function () {
        $('#CustomerContactID').empty();

        $.ajax(
             '@Url.Action("GetContactPersobByCustomerId", "VisitorsForm")',{
                type: "POST",
                datatype: "Json",
                data: { CustomerID: $('#CustomerID').val() },
                success: function (data) {
                    $.each(data, function (index, value) {
                 $('#CustomerContactID').append('<option value="' + value.CustomerContactID + '">' + value.ContactReference + '</option>');

              });
            }
         });
     });
 });  

$（函数（）{
$.ajax(
@Url.Action（“GetCustomers”、“VisitorsForm”）{
键入：“获取”，
数据类型：“Json”，
成功：功能（数据）{
$.each（数据、函数（索引、值）{
$（'#CustomerID'）。追加（''+value.DisplayName+''）；
});
}
});
$（'#CustomerID'）。更改（函数（）{
$（'#CustomerContactID'）.empty（）；
$.ajax(
“@Url.Action（“GetContactPersobByCustomerId”、“VisitorsForm”）{
类型：“POST”，
数据类型：“Json”，
数据：{CustomerID:$（'#CustomerID'）.val（），
成功：功能（数据）{
$.each（数据、函数（索引、值）{
$（“#CustomerContactID”）.append（“”+value.ContactReference+“”）；
});
}
});
});
});  

这是编码是完美的工作，并根据我在第一张图片中提到的输出。现在我需要将这个输出更改为第二个图像格式。我尝试了很多代码，但没有用。请任何人给我建议

---

提前谢谢

只需添加

$（'#CustomerContactID'）.append（$（''）.val（''）.text（'请选择'）$之前的code>。每个
都是指$（'#CustomerContactID'）。追加（$（'））.val（''.text（'请选择'）；`$。每个（数据、函数（索引、值）{$（'#CustomerContactID'）.append（''+value.ContactReference+''））；像这样的stephenYes。还要注意的是，第一个dropdownlist不应该使用ajax加载，并建议您也研究Stephen Im中的代码获取错误[error][2]，请参见[2]：您在
（'