Duplicate Value data in dropdown

Question

I have a basic requirement where in i am populating the textfield with people picker data and dynamically converting the textfield to dropdown.

Below is my code for value fetching.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
 type="text/javascript"></script>
  <script type="text/javascript">
   $(function(){
var employeeName=$("input[title^='Employee Name']").val();
$("input[title^='Employee Name']").hide();
$("input[title^='Employee Name']").after("<select id='EmployeeField' class='ms-RadioText'><option value=''></option></select>");
var allEmployeeNames=getAllEmployeeNames();
$.each(allEmployeeNames,function(i,employee){
    if(employeeName==employee.Commercial_x0020_Lead.Title){
        $("#EmployeeField").append("<option selected='selected' value='"+employee.Commercial_x0020_Lead.Title+"'>"+employee.Commercial_x0020_Lead.Title+"</option>");
    }else{

            $("#EmployeeField").append("<option value='"+employee.Commercial_x0020_Lead.Title+"'>"+employee.Commercial_x0020_Lead.Title+"</option>");         
    }       
});
$("#EmployeeField").change(function(){
    $("input[title^='Employee Name']").val($(this).val());
});
  })
 function getAllEmployeeNames(){
var results;

$.ajax({
    url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists(guid'4BFF0A20-43A2-4444-881C-18932D468E54')/items?$select=Commercial_x0020_Lead/Title&$expand=Commercial_x0020_Lead/Id",
    type: "GET",
    async:false,
    headers: {
        "Accept": "application/json;odata=verbose",
    },
    success: function (data) {
        if(data.d.results.length>0){
            results=data.d.results;

        }
    },
    error: function (data) {
        //alert("Error");
    }
});
return results;
  }
    </script>

But in my dropdown i get duplicate values as shown in image below:

Please help me solve this problem.
Thanks

Answer 1

We can use the code below to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var employeeName=$("input[title^='Employee Name']").val();
    $("input[title^='Employee Name']").hide();
    $("input[title^='Employee Name']").after("<select id='EmployeeField' class='ms-RadioText'><option value=''></option></select>");
    var allEmployeeNames=getAllEmployeeNames();
    $.each(allEmployeeNames,function(i,employee){
        if(employeeName==employee.Commercial_x0020_Lead.Title){
            $("#EmployeeField").append("<option selected='selected' value='"+employee.Commercial_x0020_Lead.Title+"'>"+employee.Commercial_x0020_Lead.Title+"</option>");
        }else{
            $("#EmployeeField").append("<option value='"+employee.Commercial_x0020_Lead.Title+"'>"+employee.Commercial_x0020_Lead.Title+"</option>");         
        }       
    });
    //remove duplicate values
    $("#EmployeeField option").each(function() {
        $(this).siblings('[value="'+ $(this).val() +'"]').remove();
    });
    $("#EmployeeField").change(function(){
        $("input[title^='Employee Name']").val($(this).val());
    });
})
function getAllEmployeeNames(){
    var results;

    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists(guid'4BFF0A20-43A2-4444-881C-18932D468E54')/items?$select=Commercial_x0020_Lead/Title&$expand=Commercial_x0020_Lead/Id",
        type: "GET",
        async:false,
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                results=data.d.results;
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });
    return results;
}
</script>