Eric Imthorn Eric Imthorn - 2 months ago 22
jQuery Question

variables seem to be coupled

I've got this weird problem with my JavaScript code.

I'm trying to create dynamically loading select boxes without the luxury of something like React.

It compares values of other select boxes so that a value can only be selected in once. So if a value is already set in one select box, it cannot be selected again.

For this I use a list of original values, clone those values into a new variable and remove the ones already selected and then create new lists.

Works fine albeit the numerous loops. The only problem is that if I remove an item from the cloned variable, the original also changes.

Even if I push the original variable in a prototype object or use

const
.



window.initial_abstract_list = ["Option one", "Option two", "Option three", "Option four", "Option five"];

// Set the option values
function reset_abstract_list() {
var in_list = [];
var new_list = window.initial_abstract_list;
console.log(window.initial_abstract_list); /// window.initial_abstract_list changes!!!

// Get selected value of all select boxes
$.each($('select.values-list'), function(index, value) {
in_list.push($(value).val().toString())
});

// Remove already set values from list
$.each($('select.values-list'), function(index, value) {
$.each(in_list, function(index2, value2) {
delete new_list[value2.toString()];
});
});

// Generate new options for select boxes
$.each($('select.values-list'), function(index, value) {
var current_selected_key = $(value).val().toString();
var current_selected_val = $('option:selected', value).text();
$(value).empty();
$(value).append($('<option></option>')
.attr('value', current_selected_key)
.text(current_selected_val));

for (var index2 in new_list) {
"use strict";
$(value).append($('<option></option>')
.attr('value', index2)
.text(new_list[index2]));
};
});
}

// Alter content on change select boxes
jQuery(document).ready(function($) {
$(document).on('click', 'button', function(e) {
reset_abstract_list();
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="values-list">
<option value="0">Option one</option>
<option value="1">Option two</option>
<option value="2">Option three</option>
<option value="3">Option four</option>
</select>

<select class="values-list">
<option value="0">Option one</option>
<option value="1">Option two</option>
<option value="2">Option three</option>
<option value="3">Option four</option>
</select>

<select class="values-list">
<option value="0">Option one</option>
<option value="1">Option two</option>
<option value="2">Option three</option>
<option value="3">Option four</option>
</select>

<button>Ye olde button</button>




Answer Source

When you set your new_list to the default list, it's basically creating a reference to the original. You need to instead copy the values of the original list so they aren't coupled.

var new_list = window.initial_abstract_list.slice();