<table>
<tr>
<td><b> Kirim Melalui</b></td>
<td><strong>:</strong></td>
<td> <p>
<select name="cmbProvinsi">
<option value="KOSONG" selected>....</option>
</select>
</p></td>
</tr>
<tr>
<td><b> Kota Tujuan </b></td>
<td><strong>:</strong></td>
<td><select name="kota2" id="kota">
<option value="KOSONG" selected>....</option>
</select>
Biaya Kirim :
<label for="biaya"></label>
<input type="text" name="biaya" id="biaya" /></td>
</tr>
</table>
<script>
function first(t){
v = t.value;
kota_active = document.getElementById(v);
list_kota = document.getElementsByClassName("kota");
length_kota = document.getElementsByClassName("kota").length;
if( v != 'KOSONG' ){
for( i = 0; i < length_kota; i++ ){
list_kota[i].style.display = 'none';
}
kota_active.style.display = 'inline-block';
kota_active.disabled = false;
}else{
for( i = 0; i < length_kota; i++ ){
list_kota[i].disabled = true;
}
}
}
function second(y){
val = y.value;
biaya = document.getElementById('biaya');
biaya.value = val;
}
</script>
<table>
<tr>
<td><b> Kirim Melalui</b></td>
<td><strong>:</strong></td>
<td> <p>
<select name="cmbProvinsi" onchange="first(this)">
<option value="KOSONG">....</option>
<option value="kota1">A</option>
<option value="kota2">B</option>
</select>
</p></td>
</tr>
<tr>
<td><b> Kota Tujuan </b></td>
<td><strong>:</strong></td>
<td>
<select name="kota2" id="kota1" class="kota" disabled onchange="second(this)">
<option value="KOSONG" selected>....</option>
<option value="2000">A1</option>
<option value="2500">A2</option>
</select>
<select name="kota2" id="kota2" class="kota" style="display:none" onchange="second(this)">
<option value="KOSONG" selected>....</option>
<option value="3000">B1</option>
<option value="3500">B2</option>
</select>
Biaya Kirim :
<label for="biaya"></label>
<input type="text" name="biaya" id="biaya" /></td>
</tr>
</table>