I have problem with my function while creating select

Question

this is my code and has a problem with the function. I don't know how to create a function that will look like in the second snippet.

var documents = ["docu1", "docu2", "docu3", "docu4"];

var sel = document.getElementById("input");
for (var i = 0; i < documents.length; i++) {
  var opt = document.createElement('option');
  opt.innerHTML = documents[i];
  opt.value = documents[i];
  sel.appendChild(opt);
}

function myFunction() {
  var c = document.getElementById("input").value;
  var a = documents.indexOf(c);
  var newOptionDocuments = documents.splice(c, 1);
  createNewSel(documents)
}

function createNewSel(documents) {
  var select = document.createElement("select");
  select.name = "cert";
  select.id = i++;
  document.getElementById("demo").appendChild(select);
  for (const doc of documents) {
    var option = document.createElement("option");
    option.value = doc;
    option.text = doc.charAt(0).toUpperCase() + doc.slice(1);
    select.appendChild(option);
  }
}

I want to create a "select" that will not repeat the same value and will update the option in all select when I click "try It" and will function like this.

    ```
    -t0: select_0 > list { 1, 2, 3, 4 }

    -t1: select_0 > choose [3] (  select_0 > list { 1, 2, [3], 4 }

    -t2: click on TryIt
           select_0 > list { 1, [3], 4 }
           select_1 > list { [1], 2, 4 }        

    -t3: click on TryIt 
           select_0 > list { [3], 4 }
           select_1 > list { [1], 4 }
           select_2 > list { [2], 4 }

    ```    
    if we change
        select_0 { [3], 4 } to  { 3, [4] }
        function()
        select_1 > list { [1], 3 }
        select_2 > list { [2], 3 }

    -t4: click on TryIt 
           select_0 > list { [4] }
           select_1 > list { [1] }
           select_2 > list { [2] }
           select_3 > list { [3] }
           end;

user_10669010 · Answer

I have done that:

const 
  documentsList = [ 'docu 1', 'docu 2', 'docu 3', 'docu 4']
, maxSelects    = documentsList.length
, pDemo         = document.querySelector('#demo')
, SelectBox = 
    { chx : Array(maxSelects).fill(-1)  // choosed element
    , slt : documentsList.map(_=>pDemo.appendChild(document.createElement('select')))
    , count : 1
    }
, bt_plus   = document.querySelector('#addSelect')
, bt_minus  = document.querySelector('#supSelect')
  ;
function setSelects()
  {
  const FstLetterCap = s => s.charAt(0).toUpperCase() + s.slice(1)
    ;
  for (let i=0;i
    {
    sbx.length = 0
    sbx.className = (ix < SelectBox.count ) ? '' : 'noDisplay'
    if (!sbx.className)
      {
      documentsList.forEach((doc,id)=>
        {
        let idSelected = (id === SelectBox.chx[ix])
        if (idSelected || !SelectBox.chx.includes(id) )
          sbx.add( new Option( FstLetterCap(doc), id, idSelected, idSelected) )
        })
      }
    })
  // bt_minus / bt_plus disabling...
  bt_plus.disabled  = !(SelectBox.count < maxSelects) 
  bt_minus.disabled = !(SelectBox.count > 1) 
  }
setSelects() // for start

pDemo.onclick = ({target}) =>
  {
  if (!target.matches('option')) return

  let selectX    = target.closest('select')
    , selectXidx = SelectBox.slt.findIndex(x=>x===selectX)
    ; 
  SelectBox.chx[ selectXidx ] = parseInt(selectX.value)
  setSelects() 
  }
bt_plus.onclick = () =>
  {
  SelectBox.count++;
  setSelects()
  }
bt_minus.onclick = () =>
  {
  SelectBox.chx[ --SelectBox.count ] = -1
  setSelects()
  }

select  {
  padding      : 0;
  text-align   : center;
  margin-right : 1em;
  }
select option {
  padding   : .3em 1em;
  }
.noDisplay { 
  display   : none; 
  }
button {
  width : 6em;
}

user_295783 · Answer

I ran out of time.

But I like these functions:

const mergeDedupeSort = arr => [...new Set([].concat(...arr))].sort();
demo.addEventListener("change",function(e) {
  const tgt = e.target;
  const val = tgt.value;
  const left = [...tgt.options].filter(opt => opt.value != val).map(opt => opt.value)
  copy = mergeDedupeSort([...copy,...left])
  console.log(copy)
})

incomplete code

const mergeDedupeSort = arr => [...new Set([].concat(...arr))].sort();


const documents = ["docu1", "docu2", "docu3", "docu4"];
let copy = documents.slice(0)
const nofDocuments = documents.length;
const demo = document.getElementById("demo");
document.getElementById("add").addEventListener("click", createNewSel)
let sels = demo.getElementsByTagName("select"); // live list
demo.addEventListener("change",function(e) {
  const tgt = e.target;
  const val = tgt.value;
  const left = [...tgt.options].filter(opt => opt.value != val).map(opt => opt.value)
  copy = mergeDedupeSort([...copy,...left])
  console.log(copy)
})
function createNewSel() {
  let len = sels.length;
  console.log(len)
  if (len >= documents.length) return;
  var select = document.createElement("select");
  select.name = "cert";
  select.id = "sel" + len;
  demo.appendChild(select);
  len++;
  for (let i = 0; i < sels.length && copy.length > 0; i++) {
    const sel = sels[i];
    const doc = copy.shift();
    console.log(doc)
    var option = document.createElement("option");
    option.value = doc;
    option.text = doc.charAt(0).toUpperCase() + doc.slice(1);
    sel.appendChild(option);
  }
}

I have problem with my function while creating select

2 Answers