셀렉트박스 연계

<script type="text/javascript">
 var selectB1 = [{"text":"원자력 A","value":"A"},{"text":"원자력 B","value":"B"},{"text":"원자력 C","value":"C"},{"text":"원자력 D","value":"D"}];
 var selectB2 = [{"text":"건설 A","value":"A"},{"text":"건설 B","value":"B"},{"text":"건설 C","value":"C"}];
 var selectB3 = [{"text":"중공업 A","value":"A"},{"text":"중공업 B","value":"B"}];
 var selectB4 = [{"text":"인프라 A","value":"A"},{"text":"인프라 B","value":"B"},{"text":"인프라 C","value":"C"}];

 

 function ChangeSelectB(selectA)
 {
  var value = selectA.value;
  var selectBArray = eval("selectB"+value);

 

// selectB 셀렉트 박스에 들어갈 변수를 가져올 수 있다.

// eval 은 변수이름으로 객체를 가져오는 용도로 사용.

  try
  {

   // DOM 방식을 사용하여 selectB 셀렉트 박스 객체를 얻어온다.

   // id를 사용해 가져오기 위해서 getElementById 메소드를 사용
   var oSelectB = document.getElementById("selectB");

   //selectB 셀렉트 박스의 하위 엘리멘트를 삭제한다.
   while(0 < oSelectB.childNodes.length)
   {
    oSelectB.removeChild(oSelectB.firstChild);
   }

   var option = null;
   // 새로운 option을 selectB 셀렉트 박스에 추가해 준다.
   for (var index=0; index < selectBArray.length ;index++ )
   {
    option = document.createElement("option");
    option.value = selectBArray[index].value;
    // TextNode를 생성하여 option 객체의 하위 객체로 추가해 준다.
    option.appendChild(document.createTextNode(selectBArray[index].text));
    //  selectB 셀렉트 박스에 option 객체를 추가한다.
    oSelectB.appendChild(option);
   }
  }
  catch (e)
  {
   alert(e.description);
  }
 }
</script>

<select name="selectA" id="selectA" onchange="ChangeSelectB(this);">
 <option value="1" selected = "selected">원자력bg</option>
 <option value="2">건설bg</option>
 <option value="3">중공업bg</option>
 <option value="4">인프라bg</option>
</select>
<select name="selectB" id="selectB">
 <option value="A">원자력 A</option>
 <option value="B">원자력 B</option>
 <option value="C">원자력 C</option>
 <option value="D">원자력 D</option>
</select>