We Keep Coding

How to reset or unselect multi select box using jQuery?

I have one bootstrap tab and i create multi select box using jQuery and the all functions are working properly but the RESET button only not working.
i try my all ways but its waste, anyone can you help me..
Please check my full code on fiddle,
MY FULL CODE IS HERE
Just want how to reset the field using jQuery
(function($) {
function refresh_select($select) {
// Clear columns
$select.wrapper.selected.html('');
$select.wrapper.non_selected.html('');
// Get search value
if ($select.wrapper.search) {
var query = $select.wrapper.search.val();
}
var options = [];
// Find all select options
$select.find('option').each(function() {
var $option = $(this);
var value = $option.prop('value');
var label = $option.text();
var selected = $option.is(':selected');
options.push({
value: value,
label: label,
selected: selected,
element: $option,
});
});
// Loop over select options and add to the non-selected and selected columns
options.forEach(function(option) {
var $row = $('<a tabindex="0" role="button" class="item"></a>').text(option.label).data('value', option.value);
// Create clone of row and add to the selected column
if (option.selected) {
$row.addClass('selected');
var $clone = $row.clone();
// Add click handler to mark row as non-selected
$clone.click(function() {
option.element.prop('selected', false);
$select.change();
});
// Add key handler to mark row as selected and make the control accessible
$clone.keypress(function() {
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
option.element.prop('selected', false);
$select.change();
}
});
$select.wrapper.selected.append($clone);
}
// Add click handler to mark row as selected
$row.click(function() {
option.element.prop('selected', 'selected');
$select.change();
});
// Add key handler to mark row as selected and make the control accessible
$row.keypress(function() {
if (event.keyCode === 32 || event.keyCode === 13) {
// Prevent the default action to stop scrolling when space is pressed
event.preventDefault();
option.element.prop('selected', 'selected');
$select.change();
}
});
// Apply search filtering
if (query && query != '' && option.label.toLowerCase().indexOf(query.toLowerCase()) === -1) {
return;
}
$select.wrapper.non_selected.append($row);
});
}
$.fn.multi = function(options) {
var settings = $.extend({
'enable_search': true,
'search_placeholder': 'Search...',
}, options);
return this.each(function() {
var $select = $(this);
// Check if already initalized
if ($select.data('multijs')) {
return;
}
// Make sure multiple is enabled
if (!$select.prop('multiple')) {
return;
}
// Hide select
$select.css('display', 'none');
$select.data('multijs', true);
// Start constructing selector
var $wrapper = $('<div class="multi-wrapper">');
// Add search bar
if (settings.enable_search) {
var $search = $('<input class="search-input" type="text" />').prop('placeholder', settings.search_placeholder);
$search.on('input change keyup', function() {
refresh_select($select);
})
$wrapper.append($search);
$wrapper.search = $search;
}
// Add columns for selected and non-selected
var $non_selected = $('<div class="non-selected-wrapper">');
var $selected = $('<div class="selected-wrapper">');
$wrapper.append($non_selected);
$wrapper.append($selected);
$wrapper.non_selected = $non_selected;
$wrapper.selected = $selected;
$select.wrapper = $wrapper;
// Add multi.js wrapper after select element
$select.after($wrapper);
// Initialize selector with values from select element
refresh_select($select);
// Refresh selector when select values change
$select.change(function() {
refresh_select($select);
});
});
}
})(jQuery);
$(document).ready(function() {
$('select').multi({
search_placeholder: 'Search',
});
});
/* Reset button */
function DeselectListBox() {
var ListBoxObject = document.getElementById("firstData")
for (var i = 0; i < ListBoxObject.length; i++) {
if (ListBoxObject.options[i].selected) {
ListBoxObject.options[i].selected = false
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You can trigger the click of your reset button and clear the whole div in your document ready function. After this you can remove the class "selected" so its completely reset.
Like this
$(document).ready(function() {
$('select').multi({
search_placeholder: 'Search',
});
$('#tabReset').click(function() {
$('.selected-wrapper').empty();
$('a').removeClass('selected');
});
});

attach an event to reset button. empty the selected-wrapper and remove the selected class from non-selected-wrapper
$("button.alltabreset").click(function(){
$(".selected-wrapper").empty();
$(".item").removeClass("selected");
});
solution: https://jsfiddle.net/zuov3wmb/

select and highlight cells in one row

I'm currently doing something related to planning. So I have a table with time stamp. every row starts with a person's name. My idea is that first you can select one cell. Then you're blocked in that row and you can only select rows within that row unless no cells are selected.
Here's my code. Can someone help to realize it?
var isMouseDown = false, isHighlighted;
$(document).on('mousedown','#werknemers_table tr td',function(){
isMouseDown = true;
$(this).toggleClass("highlighted");
console.log("Click");
console.log($(this).attr('class'));
isHighlighted = $(this).hasClass("highlighted");
return false; // prevent text selection
});
$(document).on('mouseover','#werknemers_table tr td',function(){
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
}
});
$(document).mouseup(function () {
isMouseDown = false;
});

When the mouse down event happen add the 'current_row' class in its parent row. Then add highlighted class only the row having the 'current_row' class.
Use the below code:
var isMouseDown = false, isHighlighted;
$(document).on('mousedown','#werknemers_table tr td',function(){
isMouseDown = true;
console.log('mousedown');
$(this).toggleClass("highlighted").closest('tr').toggleClass('current_row');
console.log("Click");
console.log($(this).attr('class'));
isHighlighted = $(this).hasClass("highlighted");
return false; // prevent text selection
});
$(document).on('mouseover','#werknemers_table tr td',function(){
if (isMouseDown && $(this).closest('tr').hasClass('current_row')) {
$(this).toggleClass("highlighted", isHighlighted);
}
});
$(document).mouseup(function () {
isMouseDown = false;
});
});

Quickest solution I can think of, is to add another global indicating the current row.
var currentTR = null;
Then, set this in your mousedown event handler:
currentTR = $(this).closest('tr');
Then, your mouseover event:
if (!isMouseDown) return;
if (!$(this).parents().is(currentTR)) return; // <-- ignore event if we're not a child of the relevant row
$(this).toggleClass("highlighted", isHighlighted);
Another possible solution would be to set your mouseover event handler on just the relevant row in your mosedown event handler, and remove it again in your mouseup event.

Remove multi selected rows from table

I want to remove multi rows from table, and I have used the following code but does not work.
I'm use DataTables v1.10.9.
$('#del_Btn').on('click', function () {
// 'table' is the instance of table object
table.row('.selected').remove().draw(false);
}
Full code:
$('#del_MembersBtn').on('click', function () {
if (confirm('Do you want to remove the selected items ?') === true) {
var selRows = RemoveFromGroupTable.rows({selected: true}).data().pluck(0); // return an object contains selected rows
var selRowsLength = selRows.length;
var rows = new Array();
for (i = 0; i < selRowsLength; i++) {
rows.push(selRows[i]);
}
// remove the selected rows from table
RemoveFromGroupTable.rows('.selected').remove().draw(false);
var inputData = {};
inputData.selectdRows = rows;
inputData.submit = Math.floor(Math.random() * 10) + 1;
$.post(myProp.base_url + 'directory/class/method', inputData, function (outputData) {
if (outputData.submit == outputData.submit) {
tips();
}
}, 'json');
}
}
});
What can I do to remove multi selected rows ?

SOLUTION
Use rows to select multiple rows from the table as shown below
$('#del_Btn').on('click', function () {
table.rows('.selected').remove().draw(false);
}
If the button is located inside the table, it would be necessary to use delegated event handler as follows:
$('#example').on('click', '#del_btn', function () {
table.rows('.selected').remove().draw(false);
}
where example is your table ID.
DEMO
See this jsFiddle for code and demonstration.

Accessing elements of a table row on the basis of checked radio button

On my webpage, I have a table in which there's a radio button for each row. The name of radio buttons is the same for all rows to access them as a group. I have a button which alerts the row number whose radio button is checked. I'd like to access individual elements of the table of that row as well. Any thoughts as top how I might be able to achieve this would be very welcome.
Here's a Fiddle for the issue:
http://jsfiddle.net/Gz668/13/
On the click of the button "edireq", it currently alerts the row number whose radio button is checked. I'd like to access the values of other fields of the table (requestor, approver, status etc. too.)
Here's the jquery code
$("#edireq")
.button()
.click(function () {
var ele = document.getElementsByName('reqradio');
var len = ele.length;
var flag = -1;
for (var j = 0; j < len; j++) {
if (ele[j].checked) {
flag = j;
}
}
if (flag > -1) {
alert("Row : " + (flag + 1));
} else {
alert("Select a row first");
}
});
Thanks.

You have an odd mix of native javascript and jQuery. You can use the :checked selector to get the chosen radio button, then get the closest tr and read the text of each td within that row. Try this:
$(document).ready(function () {
$('#reqtablenew tr').click(function () {
$('#reqtablenew tr').removeClass("active");
$(this).addClass("active").find('input[name="reqradio"]').prop('checked', true);
});
$("#edireq").button().click(function () {
var $ele = $('input[name="reqradio"]:checked');
if ($ele.length) {
var $tds = $ele.closest('tr').find('td');
var id = $tds.eq(1).text();
var requestor = $tds.eq(2).text();
// and so on..
alert(id);
alert(requestor);
}
else {
alert("Select a row first");
}
});
});
Example fiddle

Try this:
var list = ["Req id","Requestor","Approver","Status","Product","Version","Source","Destination"]; //list of title
if (flag > -1) {
$(".active").find("td:gt(0)").each(function(i){
console.log(list[i]+": "+$(this).text());
});
}
Fiddle here.

I came up with the following:
http://jsfiddle.net/Gz668/16/
$(document).ready(function () {
$("table").on("click", "tr", function(){
$(".active").removeClass("active");
$(this).toggleClass("active");
$(this).find("input[type='radio']").prop("checked", true);
});
$("#edireq").on("click", function(){
activeRow=$(".active");
cells=activeRow.children();
if(cells.length >0){
row={
select:cells[0],
requestId:cells[1],
requestor:cells[2],
approver:cells[3],
status:cells[4],
product:cells[5],
version:cells[5],
source:cells[6],
destination:cells[7]
};
alert(row.requestor.textContent);
}
})
});

DOM code for select tag

Here is the fiddle
http://jsfiddle.net/MfdR4/
I want, if you select a no. then according to that number the rows comes up!
var number_opt = document.getElementById("opt_select");
var opt;
for (var i = 1; i <= number_opt.value; i += 1) {
opt = '"#opt_row_' + i + '"';
$(opt).show(100);
}
Will this work! I know it's stupid!

yes you can...using change() event.
try this
$(function () {
$("#opt_row_1,#opt_row_2,#opt_row_3").hide(0); //<--using multiselector
$("#opt_select").change(function () {
var $val = this.value;
$('#opt_row_' + $val).show(100);
});
});
update
if you want to hide other rows before displaying the selected rows then
$(function () {
$("#opt_row_1,#opt_row_2,#opt_row_3").hide(0);
$("#opt_select").change(function () {
$("#opt_row_1,#opt_row_2,#opt_row_3").hide(0);
var $val = this.value;
$('#opt_row_' + $val).show(100);
});
});
hide other rows and display the selected rows : updated fiddle
simple fiddle displaying just the selected rows : fiddle here