CODEWITHSUNDEEP
javascriptjquery
D V Yogesh
D V Yogesh

Reputation: 3700

comparing select box timings

<select id="ddlMinExp">
           <option value="0">hour</option>
           <option value="1">1</option>
           <option value="2">2</option>
            <option value="3">3</option>
         <option value="4">4</option>
          <option value="5">5</option>
</select>
<select id="mints1">
          <option value="">minuts</option>
          <option value="00">00</option>
          <option value="30">30</option>
</select>
<select id="ddlMaxExp" class="slct">
         <option value="0">hour</option>
</select>
<select id="mints">
         <option value="">minuts</option>
         <option value="00">00</option>
         <option value="30">30</option>
</select>

JS:

<script>
    $(function() {
        $('#ddlMinExp').change(function() {
            //var selectedMaxValue = Number($(this).val());
            var selectedMinValue = Number($('#ddlMinExp').val());

            // alert(selectedMinValue);
            if (selectedMinValue < 12) {
                //alert(selectedMinValue);
                $(".slct option").remove();
                for (i = selectedMinValue; i < 12; i++) {
                    $('select.slct').append('<option value="' + i + '"' + '>' + i + '</option>');
                    //alert(i);
                }
            }

            $('body').on('change', '#mints1', function() {
                var mints = Number($(this).val());
                if (mints === 30) {
                    $(".slct option").remove();
                    var j = selectedMinValue + 1;
                    for (j; j < 12; j++) {
                        $('select.slct').append('<option value="' + j + '"' + '>' + j + '</option>');
                        //alert(i);
                    }
                } else {
                    $(".slct option").remove();
                    for (i = selectedMinValue; i < 12; i++) {
                        $('select.slct').append('<option value="' + i + '"' + '>' + i + '</option>');
                        //alert(i);
                    }
                }
            });
        });
    })
</script>

if select from first select box 4 automatically 3rd select box starts from 4,but when even i select 30 from second select box 3rd select box should starts from 5, first time it is working,second time if i select 3 from first select box 3rd select box should stars from 4 becoz already second select box has the value 30,when ever i change first and second select boxes 3rd select box has to changesee fiddle link

Upvotes: 0

Views: 34

Answers (2)

Nageshwar Reddy Pandem
Nageshwar Reddy Pandem

Reputation: 1047

i have edited your whole code, i think its working as you expected, have a look at jsfidde

    var selectedMinMnts = $('#ddlMntMin').val()!=="minuts"?Number($('#ddlMntMin').val()):null;

        updateMaxTime(selectedMinHrs,selectedMinMnts);
  });

    $('body').on('change', '#ddlMntMin', function() {
    var selectedMinHrs = $('#ddlHrsMin').val() !== "hour"?Number($('#ddlHrsMin').val()):null;
    var selectedMinMnts = $('#ddlMntMin').val()!=="minuts"?Number($('#ddlMntMin').val()):null;
        updateMaxTime(selectedMinHrs,selectedMinMnts);
    });

    function updateMaxTime(minHrs,minMnts){
        if((minHrs && minHrs != null)){
                if (minHrs < 12) {
                    //alert(selectedMinValue);
                    $(".ddlHrsMax option").remove();
                    for (i = minHrs; i < 12; i++) {
                        $('select.ddlHrsMax').append('<option value="' + i + '"' + '>' + i + '</option>');
                        //alert(i);
                    }
                }
        }

        if((minMnts && minMnts != null)){
            console.log(minMnts);
            if (minMnts === 30) {
                $(".ddlHrsMax option").remove();
                var j = minHrs + 1;
                for (j; j < 12; j++) {
                    $('select.ddlHrsMax').append('<option value="' + j + '"' + '>' + j + '</option>');
                    //alert(i);
                }
            } else {
                $(".ddlHrsMax option").remove();
                for (i = minHrs; i < 12; i++) {
                    $('select.ddlHrsMax').append('<option value="' + i + '"' + '>' + i + '</option>');
                    //alert(i);
                }
            }
        }


    }

})

Upvotes: 1

Kumar M
Kumar M

Reputation: 128

Updated your fiddle, please check here https://jsfiddle.net/ka56qw6t/7/

I've added one more condition in $('#ddlMinExp').change(function() to check the value of 'mints1', if its 30 then increasing 'ddlMaxExp' by 1.

Upvotes: 1

Related Questions