0

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: enter image description here

Please help me solve this problem.
Thanks

  • Hi ,I think yo need to clear the dropdown before start append operation $("#EmployeeField").empty() – myomyo Oct 9 '18 at 9:47
  • i am not trying to get you as to why clearing is required? – jayant khushalani Oct 9 '18 at 9:50
  • Sorry, I didn't obtain that you run the code on load. However, I don't have idea what happened with you. – myomyo Oct 9 '18 at 10:27
  • Hi Jayant, whether the list from which you fetch "Commercial_x0020_Lead" column value has uniqueness enabled or not. if not then might be chance in your list you will have items with same "Commercial_x0020_Lead" value in multiple place.if uniqueness is not enabled then using Javascript code you can bind only unique user to the drop down.this link might help you stackoverflow.com/questions/25744763/… – vinit kumar Oct 9 '18 at 11:58
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.