如何选择第二年不少于第一年？

Question

<label class="col-sm-1 control-label">Tahun Lulus</label>
<div class="col-sm-1">
   <select class="form-control1" name="thn_lulus1">
      <option value="">--Pilih--</option>
      <?php                                             
         $tahunawal = 2000;                                                             
         $query = mysqli_query($k,"select YEAR(now()) as tahun");
         $obj = mysqli_fetch_object($query);                                                
         while($tahunawal<=$obj->tahun){
         ?>
      <option value="<?=$tahunawal; ?>"><?=$tahunawal; ?></option>
      <?php
         $tahunawal++;
         } 
         ?>
   </select>
</div>
<div class="col-sm-1">
   s/d
   <select class="form-control1" name="thn_lulus2">
      <option value="">--Pilih--</option>
      <?php                                             
         $tahunawal = 2000;                                                             
         $query = mysqli_query($k,"select YEAR(now()) as tahun");
         $obj = mysqli_fetch_object($query);                                                
         while($tahunawal<=$obj->tahun){
         ?>
      <option value="<?=$tahunawal; ?>"><?=$tahunawal; ?></option>
      <?php
         $tahunawal++;
         } 
         ?>
   </select>
</div>

Above code shows combo box years only where start year is 2000 until current year.

Please help me, how to select the second year, not less than the first year?

Answer 1

Add id in your select tag. Like -

<select class="form-control1" name="thn_lulus1" id="thn_lulus1">

<select class="form-control1" name="thn_lulus2" id="thn_lulus2">

And then -

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$("select").on("change", function(e){
    if(e.target.id == "thn_lulus1"){
        var lulu1 = $(e.target).val();
        $.each($("#thn_lulus2 option"), function(k,v){
            if($(v).val() < lulu1) 
                $(v).attr("disabled", true);
        });
    }
});
</script>

Answer 2

You can go for Ajax.
Like this code:-

HTML Code:

<select id='dropdown1' onChange='getData(this.value);'>
    <option value="">--Pilih--</option>
    <?php                                             
        $tahunawal = 2000;                                                             
        $query = mysqli_query($k,"select YEAR(now()) as tahun");
        $obj = mysqli_fetch_object($query);                                                
        while($tahunawal<=$obj->tahun)
        {
    ?>
            <option value="<?=$tahunawal; ?>"><?=$tahunawal; ?></option>
    <?php
            $tahunawal++;
        } 
    ?>
</select>  

<select id='dropdown2'>
</select>

Javascript Code:

<script>
    function getData(val)
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function()
        {
            if (this.readyState == 4 && this.status == 200)
            {
                document.getElementById("dropdown2").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "data.php?q="+val, true);
        xmlhttp.send();
    }
</script>

PHP Code:

<?php
    //mysql connection
    $val =  $_GET['q'];
    $str = '';
    //select query contains where condition like 'Year > $val'
    $obj = mysqli_fetch_object($query);                                                
    while($tahunawal<=$obj->tahun)
    {
        $str .= '<option value="'.$tahunawal.'">'.$tahunawal.'</option>';
    }
    echo $str;
?>

Answer 3

One way is to disable options from the second select box that are less than the selected option from first.

Here's a fiddle-

 <script> function changeS2() { var selectBox1 = document.getElementById("s1"); var selectedValue1 = parseInt(selectBox1.options[selectBox1.selectedIndex].value); var selectBox2 = document.getElementById("s2"); var selectedValue2 = parseInt(selectBox2.options[selectBox2.selectedIndex].value); for (i = 0; i < selectBox2.options.length; i++) { if (parseInt(selectBox2.options[i].value) < selectedValue1) { selectBox2.options[i].disabled = true; if (parseInt(selectBox2.options[i].value) == selectedValue2) { // you can change it } } else { selectBox2.options[i].disabled = false; } } } </script> <select name="asdf" id="s1" onchange="changeS2();"> <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> </select> <select name="qwer" id="s2"> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2004" selected>2005</option> </select>