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

4
  • Hi ,I think yo need to clear the dropdown before start append operation $("#EmployeeField").empty()
    – myomyo
    Oct 9, 2018 at 9:47
  • i am not trying to get you as to why clearing is required? Oct 9, 2018 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, 2018 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/… Oct 9, 2018 at 11:58

2 Answers 2

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>
0

This worked for me:

$("#fieldId").empty();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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