아님 요것도 괜찮을 듯
<SCRIPT language=JavaScript>
<!--
<!-- //////////////////////////////////////////////////////////////
// on.gif은 선택이 되었을대 보여주는 이미지
// off.gif 는 선택이 안되었을대 보여주는 이미지

function cnj_img_radio(cnj_str) {

  var f = document.cnjform;
if (cnj_str == 0) {
  f.CnJ_01.src='../cgi/js/on.gif'; // 선택1
  f.CnJ_02.src='../cgi/js/off.gif'; // 선택2
  f.CnJ_03.src='../cgi/js/off.gif'; // 선택3
  f.cnj_text.value='선택1';  // 실제 라디오 버튼 값
  f.cnj_demo.value='선택1'; 
}

else if  (cnj_str == 1) {
  f.CnJ_01.src='../cgi/js/off.gif'; // 선택1
  f.CnJ_02.src='../cgi/js/on.gif'; // 선택2
  f.CnJ_03.src='../cgi/js/off.gif'; // 선택3
  f.cnj_text.value='선택2';  // 실제 라디오 버튼 값
  f.cnj_demo.value='선택2';       
}

else {
  f.CnJ_01.src='../cgi/js/off.gif'; // 선택1
  f.CnJ_02.src='../cgi/js/off.gif'; // 선택2
  f.CnJ_03.src='../cgi/js/on.gif'; // 선택3
  f.cnj_text.value='선택3';  // 실제 라디오 버튼 값
  f.cnj_demo.value='선택3'; 
}

}

//-->
</SCRIPT>
<center>
<form name="cnjform">
<br><br>
<img src="../cgi/js/off.gif" name="CnJ_01" onClick="javascript:cnj_img_radio('0');" style="cursor:hand">선택1
<img src="../cgi/js/on.gif" name="CnJ_02" onClick="javascript:cnj_img_radio('1');" style="cursor:hand">선택2
<img src="../cgi/js/off.gif" name="CnJ_03" onClick="javascript:cnj_img_radio('2');" style="cursor:hand">선택3
<input type="hidden" name="cnj_text" value="선택2"><br><br>
<input type="text" name="cnj_demo" value="선택2 ">
</form>
</center>

이거 한번 응용해 보심이
<script language="JavaScript">
<!-- //////////////////////////////////////////////////////////////

function Activity(name, list){
this.name = name;
this.list = list;
}

var cnj_arr = new Array(); // 셀릭트 메뉴 목록
// 추가는 cnj_arr[추가번호] = new Activity('제목', ['내용', '내용']);  이렇게 하면 됩니다.

cnj_arr[0] = new Activity('C.n.J1', ['자바스크립트1', '자바스크립트2', '자바스크립트3', '자바스크립트4']);
cnj_arr[1] = new Activity('C.n.J2', ['CGI1', 'CGI2', 'CGI3', 'CGI4', 'CGI5']);
cnj_arr[2] = new Activity('C.n.J3', ['폰트1', '폰트2', '폰트3', '폰트4', '폰트5', '폰트6']);
cnj_arr[3] = new Activity('C.n.J4', ['도메인1', '도메인2', '도메인3']);
cnj_arr[4] = new Activity('C.n.J5', ['마법사1', '마법사2', '마법사3', '마법사4', '마법사5', '마법사6', '마법사7']);
cnj_arr[5] = new Activity('C.n.J6', ['폼태그1', '폼태그2', '폼태그3']);
cnj_arr[6] = new Activity('C.n.J7', ['느낌전달', '자바스크립트', 'C.nJ 마법사', 'CGI', '도메인', '묻고답하기']);


// 아래는 수정할 필요 없습니다.
function updateList(str,str2){
var f = document.cnjform;
var arrLen = f.cnj_sel.length;
//var str2;
var n_cnj_arr;

for (var i = 0; i < cnj_arr.length; i++){
if (str == cnj_arr[i].name) {
n_cnj_arr = cnj_arr[i].list.length;
for (var j = 0; j < n_cnj_arr; j++)
f.cnj_sel.options[j] = new Option(cnj_arr[i].list[j],
cnj_arr[i].list[j]);
for (var j = n_cnj_arr; j < arrLen; j++)
f.cnj_sel.options[n_cnj_arr] = null;

f.cnj_sel.options[str2].selected = str2;  // 기본으로 셀릭트되는 부분 설정
}

}

}

// -->

</script>


<form name=cnjform>

라디오 버튼 선택값에 따라 셀릭트 메뉴가 변함<br><br>
<!-- 추가시 <input type=radio name=cnj value=추가항목값" onClick="updateList(this.value,'선택할 options index 번호')">추가 항목 이름  -->
<input type="radio" name="cnj" value="C.n.J1" onClick="updateList(this.value,'3')">C.n.J1

<input type="radio" name="cnj" value="C.n.J2" onClick="updateList(this.value,'4')">C.n.J2
<input type="radio" name="cnj" value="C.n.J3" onClick="updateList(this.value,'1')">C.n.J3
<input type="radio" name="cnj" value="C.n.J4" onClick="updateList(this.value,'2')">C.n.J4
<input type="radio" name="cnj" value="C.n.J5" onClick="updateList(this.value,'6')">C.n.J5
<input type="radio" name="cnj" value="C.n.J6" onClick="updateList(this.value,'2')">C.n.J6
<input type="radio" name="cnj" value="C.n.J7" onClick="updateList(this.value,'3')">C.n.J7


<br><br>

<!-- 이부분은 기본으로 나올 부분 -->
<select name=cnj_sel>
<option>느낌전달
<option>자바스크립트
<option>C.nJ 마법사
<option>CGI
<option>도메인
<option>묻고답하기
</select>
</form>
</center>

<!-- Script Size : 2.868 Bytes -->