Menampilkan range

Juragan · Dec 27, 2012
saya memiliki data tahun pada tabel database..
Tahun|
2001|
2002|
2003|
2004|
2005|
2006|


lalu bagaimana cara nya user dapat memilih range tahun dari yang ada di dalam tabel database.

Tahun awal
<select name="ComboSATU">
   <option value="2000">2000</option>
	sampai dengan
    <option value="2005">2005</option>
</select>

Sampai Dengan Tahun
<select name="ComboDUA">
   <option value="2002">2002</option>
	sampai dengan
    <option value="2005">2005</option>
</select>

nah bagaimana agar comboDUA TIDAK memberikan pilihan data dari 2000 - 2005 akan tetapi memberikan pilihan 2003 - 20005, mengingat pada ComboSATU dipilih tahun awal 2002.

please bantuannya mas ELLYX..
Silahkan login untuk menjawab!
0
Ellyx Christian · Dec 28, 2012 · 0 Suka · 0 Tidak Suka
coba pake jquery:
<select name="ComboSATU" id="ComboSATU">
   <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
</select>
<select name="ComboDUA" id="ComboDUA">
   <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
</select>
<!-- jquery dari cdn google -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(function(){
        $('#ComboSATU').change(function(){
            var sel = '#ComboDUA option[value="'+$(this).val()+'"]';
            $('#ComboDUA option').removeAttr('disabled');
            $(sel).attr('disabled','disabled').prevAll().attr('disabled','disabled');
        });
        $('#ComboDUA').change(function(){
            var sel = '#ComboSATU option[value="'+$(this).val()+'"]';
            $('#ComboSATU option').removeAttr('disabled');
            $(sel).attr('disabled','disabled').nextAll().attr('disabled','disabled');
        });
    });
</script>