Load Dropdownlist value in <select> from controller where value and text are different

Question

Hello everyone im just simply trying to load values in a dropdownlist from a controller if I have both the value and text be the same values it works with the model property. But im trying to have the value be the id and the text to be the name with this setup the dropdown is not loading the id.

If both text and value are the same I can just do this and it works

vm.CustomerName = model.CustomerName;

View DDL

@Html.DropDownListFor(e => e.ServiceVM.Employee, Model.Employees, "Select Employee", new { @class = "form-control" })

Some of what i tried.

vm.Employee = new SelectListItem { Value = model.EmployeeID.ToString(), Selected=true };
                //vm.EmployeeName = model.EmployeeID.ToString();
                //var employee = new Employee_Main();
                //try
                //{
                //    employee = context.Employee_Main.Where(z => z.EmployeeID == model.EmployeeID).FirstOrDefault();
                //}
                //catch(System.Exception) { }
                //vm.EmpID = employee.EmployeeID.ToString();
                //vm.EmployeeName = employee.EmployeeID.ToString();

I really thought this would of worked.. Im setting the correct 'value' and 'text' that are displayed in the list of ddl items. and also saying selected=true.

 //vm.EID = model.EmployeeID;
            if (model.EmployeeID != null)
            {
                if(Int32.TryParse(model.EmployeeID.ToString(), out int empID))
                {
                    var employee = context.Employee_Main.Where(e => e.EmployeeID == empID).FirstOrDefault();
                    if(employee != null)
                    {
                        vm.Employee = new SelectListItem() { Value = employee.EmployeeID.ToString(), Text = employee.EFullName, Selected=true };

                    }
                }

                    @Html.DropDownListFor(e => e.ServiceVM.Employee, Model.Employees, "Select Employee", new { @class = "form-control" })

Answer 1

I got it working. I forgot to change my javascript to match with the changing model fields.

    var employ = modalA.find(body).find("#ServiceVM_Employee");
    //empid.val(jsonObject.employeeid);
    //empfn.val(jsonObject.employeefname);
    //empln.val(jsonObject.employeelname);
    //empem.val(jsonObject.employeeemail);
    //emppo.val(jsonObject.employeeposition);
    //empname.val(jsonObject.employeefullname);
    employ.val(jsonObject.employeeid);

Also for adding content to a listbox.

function displayContactData(conID, modal) {
    return $.ajax({
        url: '@Url.Action("GetContactInfo", "Service")',
        data: { contact: conID },
        dataType: 'json',
        success: function (data) {
            var modalX = modal;
            var fullL = modalX.find('.modal-body').find('#lstContact');                          
            fullL.empty();
            $.each(data, function () {
                fullL.append("<option value='" + this.Value + "'>" + this.Text + "</option");                
            });
        }
    });
}