Balance value between Listbox
การใช้งาน Listbox 2 ตัวที่ทำงานสัมพันธ์กัน เมื่อเลือกตัวหนึ่ง อีกตัวหนึ่งจะทำการเลือกค่าที่สัมพันธ์กันออกมา
<head>
<script type="text/javascript">
function balance( id )
{
if( id == "sel1" )
{
valueset = document.getElementById("sel1").value;
if( valueset == " " && valueset != "" )
{
document.getElementById("sel2").value = " ";
}
else
{
document.getElementById("sel2").value = 100 - valueset;
};
}
else
{
valueset = document.getElementById("sel2").value;
if( valueset == " " && valueset != "" )
{
document.getElementById("sel1").value = " ";
}
else
{
document.getElementById("sel1").value = 100 - valueset;
};
};
};
</script>
</head>
<body>
<table>
<tr>
<td><strong><font size="1" face="verdana, arial, helvetica, sans-serif">select1</font></strong></td>
<td><strong><font size="1" face="verdana, arial, helvetica, sans-serif"> </font></strong></td>
<td><strong><font size="1" face="verdana, arial, helvetica, sans-serif">select2</font></strong></td>
</tr>
<tr>
<td align="center"><select name="sel1" id="sel1" onchange="balance('sel1');">
<option value=" "> </option>
<option value="0" >0</option>
<option value="10" >10</option>
<option value="20" >20</option>
<option value="30" >30</option>
<option value="40" >40</option>
<option value="50" >50</option>
<option value="60" >60</option>
<option value="70" >70</option>
<option value="80" >80</option>
<option value="90" >90</option>
<option value="100" >100</option>
</select></td>
<td> </td>
<td align="center"><select name="sel2" id="sel2" onchange="balance('sel2');">
<option value=" "> </option>
<option value="0" >0</option>
<option value="10" >10</option>
<option value="20" >20</option>
<option value="30" >30</option>
<option value="40" >40</option>
<option value="50" >50</option>
<option value="60" >60</option>
<option value="70" >70</option>
<option value="80" >80</option>
<option value="90" >90</option>
<option value="100" >100</option>
</select></td>
</tr>
</table>
โค้ดจาก http://weberdev.com