javascript - 첫번째 값 선택하면 값에 따라 두번째 Select 동적으로 디스플레이

js

var second0 = new Array (" ");
var secondval0 = new Array (" ");
var second1 = new Array (" ","TIGER 151","TIGER 201","TIGER 300EP","TIGER 350EP");
var secondval1 = new Array (" ","0101","0201","0301","0401");
var second2 = new Array (" ","AC/DC TIG 300AP","AC/DC TIG 500AP");
var secondval2 = new Array (" ","0102","0202");
var second3 = new Array (" ","MICRO TIG 30MP","MULTI D200GP","GTAW 300GP");
var secondval3 = new Array (" ","0103","0203","0303");
var second4 = new Array (" ","MIG 160","MIG 251","MIG 350CP","MIG 500CP");
var secondval4 = new Array (" ","0105","0205","0305","0405");
var second5 = new Array (" ","CUT 35P","CUT 70P","CUT 100P","CUT 130P");
var secondval5 = new Array (" ","0106","0206","0306","0406");
var second6 = new Array (" ","MICRO PLASMA 30XP","MICRO PLASMA 50XP","PLASMA 100XP","PLASMA 150XP","PLASMA 200XP","PLASMA 300XP");
var secondval6 = new Array (" ","0107","0207","0307","0407","0507","0607");
var second7 = new Array (" ","DC 150DP","DC 160DP","DC 300DP","S200DP","S300DP");
var secondval7 = new Array (" ","0108","0208","0308","0408","0409");
var second8 = new Array (" ","PIPE AUTO 150 MINI","PIPE AUTO 200","Orbital Head PRL 시리즈","Orbital Head PRM 시리즈");
var secondval8 = new Array (" ","0109","0209","0309","0409");
var second9 = new Array (" ","PTA SYSTEM","T용접 자동화 장치");
var secondval9 = new Array (" ","0104","0204");
var second10 = new Array (" ","텅스텐봉 연마기","수냉장치","가스 믹서기","용접자동면");
var secondval10 = new Array (" ","0110","0210","0302","0410");

function updateMenus() {
  Obj = document.catform.cat1;
  SelNo = Obj.selectedIndex;

  var arraySecond = eval("second" + SelNo);
  var arraySecondval = eval("secondval" + SelNo);
  var lengththis = arraySecond.length;
  document.catform.cat2.options.length = arraySecond.length;
  for ( k=0; k  < arraySecond.length; k++) {
    if(k !=0) 
      document.catform.cat2.options[k].value = arraySecondval[k];
    document.catform.cat2.options[k].text = arraySecond[k];
  }

}

html

  <form name="catform">
    <select name="cat1" onChange="updateMenus(this)">
      <option>1 </option>
      <option>2 </option>
      <option>3 </option>
      <option>4 </option>
      <option>5 </option>
      <option>6 </option>
      <option>7 </option>
      <option>8 </option>
      <option>9 </option>
      <option>10 </option>
    </select>
    <select name="cat2">                       
      <option></option>
    </select>
  </form> 

See the Pen MouseEvent - onmousemove vs. onmouseleave vs. onmouseleave by younghyeong ryu (@wangta69) on CodePen.