-
Add a value in Datalist using Jquery
In a scenario there is a Datalist and there are some Datalist values in that Datalist. When you will click on any Datalist value that value will be invisible from that Datalist and should be shown on vf page with a checkbox and when you will check that checkbox that value will be invisible from page and again should be shown in datalist. I want to solve this problem using JQuery. I have gone through following code but not getting complete solution. Can i get any solution..?
function checkboxClick(obj){
var id = $(obj).attr(“id”);
if($(‘#’ + id).is(“:checked”)){
$(obj).closest(“tr”).remove();
}
}
$(document).ready(function(){
var a;
var idCounter=1;
$(document).on(‘click’, ‘#ddlList’, function () {
a = $(‘#ddlList option:selected’).text();
$(‘#ddlList option:selected’).remove();
if(a != ”){
var b = $(‘#demo’).append(‘<tr>
<td><input type=”checkbox” onclick=”checkboxClick(this)” id=”ck_’+idCounter+'”/></td>
<td class=”newLine”>’+a+'</td>
</tr>
‘);
idCounter++;
}
});
});———————-
<select id=”ddlList”>
<option value=”0″>None</option>
<option value=”1″>ASP.NET</option>
<option value=”2″>C#</option>
<option value=”3″>VB.NET</option>
<option value=”4″>HTML</option>
<option value=”5″>jQuery</option>
</select>
<table id=”demo”>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>-
This discussion was modified 10 years, 1 month ago by
Satyakam.
-
This discussion was modified 10 years, 1 month ago by Satyakam.
-
This discussion was modified 10 years, 1 month ago by Satyakam.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 10 years ago by Forcetalks.
-
This discussion was modified 8 years, 5 months ago by Forcetalks.
-
This discussion was modified 10 years, 1 month ago by
-
1 Reply
-
Hi Satyakam.
You can use typeahead library of jquery in you VF page that can help you achieve the same functionality. Whenever user would select any value from data list, you can get that using typeahead:selected and remove that value from your datalist by writing custom remove function. As needed, you can use the selected value to display it on another div with checkbox and when user checks the checkbox, you can again add the value into the original datalist by using javascript push() function.
$(‘#the-basics .typeahead’).typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: ‘states’,
source: substringMatcher(states)
}).bind(“typeahead:selected”, function(obj, datum) {
alert(‘datum ‘+datum);
states.remove(datum);
//document.getElementById(“inputTextTypeahead”).value = ”;states2.push(datum);
alert(‘states2 ‘+states2);
document.getElementById(“demo”).innerHTML = states2;});
Note: datum is the selected value that user selects from the datalist. States is the data list.
Following is the remove function that will remove the selected value from the original data list.
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[–L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
Log In to reply.
