I'm working on a project on data mapping. Several checks are realized:
well imported file
table choice
columns choice of the table
typage of data
I'm for at the part of the choice of columns for the moment. I'm stocking these various choices in an array. The problem is that if I want to delete one choice in my array, all data are deleted ! I'm using this plugin: http://wenzhixin.net.cn/p/multiple-select/docs/
var choiceFields = [];
$('#selectFields').multipleSelect({
filter: true,
onClick: function(view)
{
choiceFields.push(view.value);
var length = choiceFields.length-1;
if(view.checked === false)
{
choiceFields.splice(view.value);
}
console.log(choiceFields);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="select-box">
<label for="selectFields"><span class="label-FieldChoice">Choice fields</span> </label>
<select id="selectFields" multiple="multiple" style="display: none;">
<option value="id">id</option>
<option value="username">username</option>
<option value="username_canonical">username_canonical</option>
<option value="email">email</option>
<option value="email_canonical">email_canonical</option>
<option value="enabled">enabled</option>
<option value="salt">salt</option>
<option value="password">password</option>
<option value="last_login">last_login</option>
<option value="confirmation_token">confirmation_token</option>
<option value="password_requested_at">password_requested_at</option>
<option value="roles">roles</option>
<option value="lastName">lastName</option>
<option value="firstName">firstName</option>
</select>
</div>
Find the index of the array element you want to remove using indexOf , and then remove that index with splice . The splice() method changes the contents of an array by removing existing elements and/or adding new elements. The second parameter of splice is the number of elements to remove.
It's not working because you are removing items from the array while looping through the keys. When you remove an item, it will rearrange the other items depending on how the array is implemented internally, and you end up with a loop that doesn't iterate over the keys that you expect.
Using slice() to convert array-like objects to arrays The slice() method is often used with bind() and call() to create a utility method that converts an array-like object into an array.
slice returns a piece of the array but it doesn't affect the original array. splice changes the original array by removing, replacing, or adding values and returns the affected values.
You can do it like this:
var choiceFields = [];
$('#selectFields').multipleSelect({
filter: true,
onClick: function(view) {
choiceFields.push(view.value);
var length = choiceFields.length - 1;
if (view.checked === false) {
choiceFields = jQuery.grep(choiceFields, function(value) {
return value != view.value;
});
}
console.log(choiceFields);
}
});
I've changed:
choiceFields.splice(view.value);
to:
choiceFields = jQuery.grep(choiceFields, function(value) {
return value != view.value;
});
Demo
var choiceFields = [];
$('#selectFields').multipleSelect({
filter: true,
onClick: function(view) {
choiceFields.push(view.value);
var length = choiceFields.length - 1;
if (view.checked === false) {
choiceFields = jQuery.grep(choiceFields, function(value) {
return value != view.value;
});
}
console.log(choiceFields);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet" />
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="select-box">
<label for="selectFields"><span class="label-FieldChoice">Choice fields</span> </label>
<select id="selectFields" multiple="multiple" style="display: none;">
<option value="id">id</option>
<option value="username">username</option>
<option value="username_canonical">username_canonical</option>
<option value="email">email</option>
<option value="email_canonical">email_canonical</option>
<option value="enabled">enabled</option>
<option value="salt">salt</option>
<option value="password">password</option>
<option value="last_login">last_login</option>
<option value="confirmation_token">confirmation_token</option>
<option value="password_requested_at">password_requested_at</option>
<option value="roles">roles</option>
<option value="lastName">lastName</option>
<option value="firstName">firstName</option>
</select>
</div>
In Array.splice()
it takes 3 parameters array.splice(index, howMany, [element1][, ..., elementN])
.
index − Index at which to start changing the array.
howMany − An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed.
element1, ..., elementN − The elements to add to the array. If you don't specify any elements, splice simply removes the elements from the array.
But you had'nt provied howMany
parameter in your answer provide this value to delete particular index from array
ex -
var choiceFields = [];
$('#selectFields').multipleSelect({
filter: true,
onClick: function(view)
{
var length = choiceFields.length-1;
if(view.checked === false)
{
var index = choiceFields.indexOf(view.value); // Finding Index of Item
choiceFields.splice(index,1); // Splicing one element from index
}
else{
choiceFields.push(view.value); // if false we do not push value
}
console.log(choiceFields);
},
onCheckAll: function()
{
choiceFields = []; // delete all previous values
var options = document.getElementById('selectFields');
for(var i=0;i<options.length;i++){
choiceFields.push(options[i].text);
}
console.log(choiceFields);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.js"></script>
<div class="select-box">
<label for="selectFields"><span class="label-FieldChoice">Choice fields</span> </label>
<select id="selectFields" multiple="multiple" style="display: none;">
<option value="id">id</option>
<option value="username">username</option>
<option value="username_canonical">username_canonical</option>
<option value="email">email</option>
<option value="email_canonical">email_canonical</option>
<option value="enabled">enabled</option>
<option value="salt">salt</option>
<option value="password">password</option>
<option value="last_login">last_login</option>
<option value="confirmation_token">confirmation_token</option>
<option value="password_requested_at">password_requested_at</option>
<option value="roles">roles</option>
<option value="lastName">lastName</option>
<option value="firstName">firstName</option>
</select>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With