How to append a value in html datalist?

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

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>

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.