DOM 을 이용한 엘리먼트 생성 및 삭제(IE , crossbrowsing 작업 필요)
<script type="text/javascript">
getdate = function(y, m, d)
{
var yy = document.getElementById(y).value;
var mm = document.getElementById(m).value;
var retValue = "";
if(yy=="")
{
alert("년을 선택해주세요");
return false;
}
if(mm=="")
{
return false;
}
if(mm == "2")
{
if(yy%4 == 0 && yy%100 != 0 || yy%400 == 0)
retValue = "29";
else
retValue = "28";
}
else if(mm == "1" || mm == "3" || mm == "5" || mm == "7" || mm == "8" || mm == "10" || mm == "12" )
{
retValue = "31";
}
else
{
retValue = "30";
}
var psd = document.getElementById(d);
psd.length = 0;
for(i=0; i < retValue; i++)
{
var oday = i+1;
var opt = document.createElement('option');
opt.setAttribute('value', oday);
opt.innerText = oday;
psd.appendChild(opt);
}
}
esv = function(cfm, clist)
{
var result = false;
for(var d=0; d<cfm.length; d++)
{
var after_sel = cfm.childNodes;
if(clist == after_sel[d].getAttribute('value'))
{
result = true;
break;
}
}
return result;
}
add_list = function()
{
c_list = document.getElementById('consul_list');
c_cfm = document.getElementById('consul_cfm');
if(c_cfm.hasChildNodes())
{
for(var c=0; c<c_list.length; c++)
{
if(c_list[c].selected)
{
if(!esv(c_cfm, c_list[c].value))
{
var copt = document.createElement('option');
copt.setAttribute('value', c_list[c].value);
copt.innerText = c_list[c].text;
c_cfm.appendChild(copt);
}
}
}
}
else
{
for(var c=0; c < c_list.length; c++)
{
if(c_list[c].selected)
{
var copt = document.createElement('option');
copt.setAttribute('value', c_list[c].value);
copt.innerText = c_list[c].text;
c_cfm.appendChild(copt);
}
}
}
}
del_list = function()
{
d_cfm = document.getElementById('consul_cfm');
if(d_cfm.length>0)
{
for(dd = 0; dd <= d_cfm.length; dd++)
{
if(d_cfm[dd].selected)
{
d_cfm.removeChild(d_cfm[dd]);
}
}
}
}
</script>
<body>
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td>기간</td>
<td colspan="3">
<select name="p_s_y" id="p_s_y" style="width:90px;" onChange="getdate('p_s_y','p_s_m','p_s_d')">
<option value="">--</option>
<%
for(int p_s_y= 2007; p_s_y < 2020; p_s_y++)
{
%>
<option value="<%=p_s_y %>"><%=p_s_y %></option>
<%
}
%>
</select> 년
<select name="p_s_m" id="p_s_m" style="width:50px;" onChange="getdate('p_s_y','p_s_m','p_s_d')">
<option value="">--</option>
<%
for(int p_s_m= 1; p_s_m < 13; p_s_m++)
{
%>
<option value="<%=p_s_m %>"><%=p_s_m %></option>
<%
}
%>
</select> 월
<select name="p_s_d" id="p_s_d" style="width:50px;">
<option value="">--</option>
</select> 일 ~
<select name="p_e_y" id="p_e_y" style="width:90px;" onChange="getdate('p_e_y','p_e_m','p_e_d')">
<option value="">--</option>
<%
for(int p_e_y= 2007; p_e_y < 2020; p_e_y++)
{
%>
<option value="<%=p_e_y %>"><%=p_e_y %></option>
<%
}
%>
</select> 년
<select name="p_e_m" id="p_e_m" style="width:50px;" onChange="getdate('p_e_y','p_e_m','p_e_d')">
<option value="">--</option>
<%
for(int p_e_m= 1; p_e_m < 13; p_e_m++)
{
%>
<option value="<%=p_e_m %>"><%=p_e_m %></option>
<%
}
%>
</select> 월
<select name="p_e_d" id="p_e_d" style="width:50px;">
<option value="">--</option>
</select> 일
</td>
</tr>
<tr>
<td>참석 상담사</td>
<td>
<select name="consul_list" id="consul_list" size="5" style="width:200px;" multiple>
<option value="하나">하나</option>
<option value="둘">둘</option>
<option value="셋">셋</option>
<option value="넷">넷</option>
<option value="다섯">다섯</option>
<option value="여섯">여섯</option>
<option value="일곱">일곱</option>
<option value="여덟">여덟</option>
</select>
</td>
<td>
<input type="button" name="con_add" value="▶" onClick="add_list()"><br>
<input type="button" name="con_del" value="◀" onClick="del_list()">
</td>
<td>
<select name="consul_cfm" id="consul_cfm" size="5" style="width:200px;" multiple>
</select>
</td>
</tr>
</table>
</body>