javascript - variables seem to be coupled -


i've got weird problem javascript code.
i'm trying create dynamically loading select boxes without luxury of react.

it compares values of other select boxes value can selected in once. if value set in 1 select box, cannot selected again.

for use list of original values, clone values new variable , remove ones selected , create new lists.

works fine albeit numerous loops. problem if remove item cloned variable, original changes.

even if push original variable in prototype object or use const.

window.initial_abstract_list = ["option one", "option two", "option three", "option four", "option five"];    // set 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!!!      // selected value of select boxes    $.each($('select.values-list'), function(index, value) {      in_list.push($(value).val().tostring())    });      // remove set values list    $.each($('select.values-list'), function(index, value) {      $.each(in_list, function(index2, value2) {        delete new_list[value2.tostring()];      });    });      // generate new options 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));        (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>

when set new_list default list, it's creating reference original. need instead copy values of original list aren't coupled.

var new_list = window.initial_abstract_list.slice(); 

Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -