Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › How to append a value in html datalist?

Tagged: , , , , ,

  • Salesforce® Discussions

    How to append a value in html datalist?

    Posted by jitesh on March 31, 2016 at 8:05 AM

    I have a scenario regarding html datalist . When I select a value from a html datalist it should get removed from the datalist and show below the datalist text box along with a check-box for each value selected .

    I have been able to achieved this but now I want that when I click on the check-box the datalist value should get added back to the datalist. Can any one help me out to achieve this.

    My datalist is generated from

    “

    • This discussion was modified 10 years, 2 months ago by  jitesh.
    • This discussion was modified 10 years, 2 months ago by  jitesh.
    • This discussion was modified 10 years ago by  Forcetalks.
    • This discussion was modified 8 years, 7 months ago by  Forcetalks.
    shariq replied 7 years, 9 months ago 5 Members · 5 Replies
  • 5 Replies

  • Prafull

    Member
    April 6, 2016 at 9:33 AM

    Hi Jitesh,

    This is the solution of your problem. You have to call below function on change of Datalist. This function will remove selected value from datalist and append selected value with checkbox below the datalist.

    //function to remove from datalist
function CallFunctionToPopulateSectors(selectedSector,idOfSectorDatalist){ 
   var html = '<span id='+selectedSector+'><input type=\"checkbox\" id='+selectedSector+' name="'+idOfSectorDatalist.id+'" value=\"'+selectedSector+'\" onchange=\"callFunctionToRemoveFromPortFolio(this.id,this.checked,this.value,this.name)\">'+selectedSector+'</span>';
   j$("#divForRightSideSelectedSector").append(html) ;
   var optionArr = j$(j$(j$("#divToUpdatePortFolio datalist"))[1]).find("option"); 
   for(var i=0;i<optionArr.length;i++){
       if(j$(j$(optionArr)[i]).text() == selectedSector){
           console.log('j$(j$(optionArr)[i])'+j$(j$(optionArr)[i]));
           j$(j$(optionArr)[i]).remove();
       }
   }
 }

    This function will append selected checkbox value with the datalist.

    //funciton to add in the datalist
function callFunctionToRemoveFromPortFolio(idToRemove, checkBoxChecked, 
        valueToAdd, idOfSectorDatalist){
    j$(j$(j$("#divToUpdatePortFolio datalist"))[1])
    .append('<option value="'+valueToAdd+'">'+valueToAdd+'</option>');
}

    ID Description :-
    divForRightSideSelectedSector :- div where the selected value from datalist is shown

    divToUpdatePortFolio :- div where the datalist is present

  • [adinserter block='9']

  • jitesh

    Member
    April 14, 2016 at 8:06 AM

    Thank you Prafull , that was a great help to me.

  • Satyakam

    Member
    April 14, 2016 at 8:50 AM

    hi jitesh,

    you can get your solution by follwing code.

     

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
    <script>
    var idCounter=1;
    function checkboxClick(obj){
    var id = $(obj).attr(“id”);
    console.log(id);
    if($(‘#’ + id).is(“:checked”)){
    var str = $(‘#’ + id).closest(“tr”).text();
    $(obj).closest(“tr”).remove();

    $(‘#allNames’).append(‘<option value=”‘+str+'”/>’);
    }
    }
    $(document).ready(function() {
    $(‘#name’).on(‘input’, function() {
    var userText = $(this).val();
    console.log(userText);
    $(“#allNames”).find(“option”).each(function() {
    if($(this).val() == userText) {
    $(this).remove();
    $(“#name”).val(null);
    //$(userText).null();

    var b = $(‘#demo’).append(‘<tr><td><input type=”checkbox” onclick=”checkboxClick(this)” id=”ck_’+idCounter+'”/></td><td class=”newLine”>’+userText+'</td></tr>’);
    idCounter++;
    }
    });
    });
    });
    </script>

  • Parul

    Member
    September 20, 2018 at 12:09 AM

    Hi,

    You can have this in two ways:

    1.) By using function:

    function CallFunctionToPopulateSectors(selectedSector,idOfSectorDatalist){
    var html = ‘<span id=’+selectedSector+’><input type=\”checkbox\” id=’+selectedSector+’ name=”‘+idOfSectorDatalist.id+'” value=\”‘+selectedSector+’\” onchange=\”callFunctionToRemoveFromPortFolio(this.id,this.checked,this.value,this.name)\”>’+selectedSector+'</span>’;
    j$(“#divForRightSideSelectedSector”).append(html) ;
    var optionArr = j$(j$(j$(“#divToUpdatePortFolio datalist”))[1]).find(“option”);
    for(var i=0;i<optionArr.length;i++){
    if(j$(j$(optionArr)[i]).text() == selectedSector){
    console.log(‘j$(j$(optionArr)[i])’+j$(j$(optionArr)[i]));
    j$(j$(optionArr)[i]).remove();
    }
    }
    }

    2.) By running a script:

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
    <script>
    var idCounter=1;
    function checkboxClick(obj){
    var id = $(obj).attr(“id”);
    console.log(id);
    if($(‘#’ + id).is(“:checked”)){
    var str = $(‘#’ + id).closest(“tr”).text();
    $(obj).closest(“tr”).remove();

    $(‘#allNames’).append(‘<option value=”‘+str+’”/>’);
    }
    }
    $(document).ready(function() {
    $(‘#name’).on(‘input’, function() {
    var userText = $(this).val();
    console.log(userText);
    $(“#allNames”).find(“option”).each(function() {
    if($(this).val() == userText) {
    $(this).remove();
    $(“#name”).val(null);
    //$(userText).null();

    var b = $(‘#demo’).append(‘<tr><td><input type=”checkbox” onclick=”checkboxClick(this)” id=”ck_’+idCounter+’”/></td><td class=”newLine”>’+userText+'</td></tr>’);
    idCounter++;
    }
    });
    });
    });
    </script>

  • shariq

    Member
    September 20, 2018 at 8:03 PM

    Hi,

    I found this online –

    <input name=”car” list=”anrede” />
    <datalist id=”anrede”></datalist>

    <script type=”text/javascript”>
    var mycars = new Array();
    mycars[0]=’Herr’;
    mycars[1]=’Frau’;

    var options = ”;

    for(var i = 0; i < mycars.length; i++)
    options += ‘<option value=”‘+mycars[i]+'” />’;

    document.getElementById(‘anrede’).innerHTML = options;
    </script>

    Hope this helps.

Log In to reply.