JSFiddle - React, Tailwind, and code Playground

by Andy Bat

HTML

<script src="http://tigir.com/js/linkedselect.js"></script>
  <select size="4" id="List1">
    <option value="img">insered images</option>
    <option value="path"> explorer path </option>
  </select>
  <select size="4" id="List2"></select>
<p> 

  <select size="4" id="List3"></select>
  <select size="4" id="List4"></select>

JavaScript

var syncList1 = new syncList;
syncList1.dataList = {
  'img':{
      '1':'Rasterized',
      '2':'Smart object'
  },
  
  'path':{
      '1':'Fixed',
      '2':'Changed'
  }
};
syncList1.sync("List1","List2");
//worked part


//tested part
var ar1 = new Array(2);
for (i = 0; i < ar1.length; i++) {
    ar1[i] = new Array(3);
}

ar1[0][0] = "Ins img"; //disp name option 
ar1[0][1] = "img"; // value
ar1[0][2] = "Rastr"; // linked selects
ar1[0][3] = "Smart"; // linked selects
ar1[1][0] = "Expl Path";
ar1[1][1] = "puth";
ar1[1][2] = "Fix";
ar1[1][3] = "Chang";

var syncList2 = new syncList;

for (i = 0; i < ar1.length; i++) {
  $('#List3').append("<option value=" +ar1[i][1]+ ">"+ar1[i][0]+"</option>");  
  for (p = 0; p < ar1[i].length; p++) {
    // this create structure for library !
  }
}

syncList2.sync("List3","List4");