I am not getting 23:30 in option of select box. Can anybody tell me the correct way to add with 30 minute interval in option.

jQuery(document).ready(function() {
  var hr = "00";
  var mi = "00";
  var count = 0;
  for (hr = "0"; hr < 24; hr++) {
    if (hr < 10) {
      apd = "0";
    } else {
      apd = ""
    }
    if (count % 2 == 0) {
      mi = "00";

      jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr + ':' + mi + '">' + apd + hr + ':' + mi + '</option>');
    } else {
      hr--;
      mi = "30";

      jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr + ':' + mi + '">' + apd + hr + ':' + mi + '</option>')
    }
    count++;
  }
});

<script src=".1.1/jquery.min.js"></script>

<div>
  <select name="bmg_monday_start_hour" id="bmg_monday_start_hour" class="form-control bmg-hrs-mins-input"></select>
</div>

I am not getting 23:30 in option of select box. Can anybody tell me the correct way to add with 30 minute interval in option.

jQuery(document).ready(function() {
  var hr = "00";
  var mi = "00";
  var count = 0;
  for (hr = "0"; hr < 24; hr++) {
    if (hr < 10) {
      apd = "0";
    } else {
      apd = ""
    }
    if (count % 2 == 0) {
      mi = "00";

      jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr + ':' + mi + '">' + apd + hr + ':' + mi + '</option>');
    } else {
      hr--;
      mi = "30";

      jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr + ':' + mi + '">' + apd + hr + ':' + mi + '</option>')
    }
    count++;
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select name="bmg_monday_start_hour" id="bmg_monday_start_hour" class="form-control bmg-hrs-mins-input"></select>
</div>

• javascript
• jquery

Share Improve this question Follow edited Jul 29, 2017 at 13:18 H77 5,96722 gold badges2828 silver badges4040 bronze badges asked Jul 29, 2017 at 12:59 Abhilash NarayanAbhilash Narayan 5011 silver badge1414 bronze badges 1

• 1 I first wondered why youre posting a code block full of newlines. Then realized that theres code far far right from screen... My point is: please fix your formatting... – Jonas Wilms Commented Jul 29, 2017 at 13:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You could remove the logic around count.

e.g.

let $select = jQuery("#bmg_monday_start_hour");

for (let hr = 0; hr < 24; hr++) {

  let hrStr = hr.toString().padStart(2, "0") + ":";

  let val = hrStr + "00";
  $select.append('<option val="' + val + '">' + val + '</option>');

  val = hrStr + "30";
  $select.append('<option val="' + val + '">' + val + '</option>')

}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select name="bmg_monday_start_hour" id="bmg_monday_start_hour" class="form-control bmg-hrs-mins-input"></select>
</div>

you can achive that in few lines using array of hr and array of mi looping through hr array and append option

$(document).ready(function() {
var hr=['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
var mi=['00','30'];
for( i=0;i<hr.length;i++){
$("#bmg_monday_start_hour").append('<option val="' + hr[i]  + ':' + mi[0] + '">'+ hr[i] + ':' + mi[0] + '</option>');									
$("#bmg_monday_start_hour").append('<option val="' + hr[i]  + ':' + mi[1] + '">' + hr[i] + ':' + mi[1] + '</option>');
								}
              })

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select name="bmg_monday_start_hour" id="bmg_monday_start_hour" class="form-control bmg-hrs-mins-input">
                        </select>
                        </div>

jQuery(document).ready(function () {
    var hr = "00";
    var mi = "00";
    var count = 0;
    var apd = "0";

    for (hr = "0"; hr <= 24; hr++) {
        if (hr <= 10) {
            apd = "0";
        } else {
            apd = "";
        }
        if (count % 2 == 0) {
            mi = "00";

            if (hr != "24" && hr != "10") {

                jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr + ':' + mi + '">' + apd + hr + ':' + mi + '</option>');

            }
            else if (hr == "10") {

                jQuery("#bmg_monday_start_hour").append('<option val="' + hr + ':' + mi + '">' + hr + ':' + mi + '</option>');

            }

        } else {
            hr--;
            mi = "30";

            jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr + ':' + mi + '">' + apd + hr + ':' + mi + '</option>')
        }
        count++;
    }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <select name="bmg_monday_start_hour" id="bmg_monday_start_hour" class="form-control bmg-hrs-mins-input"></select>
</div>

Well

for(hr = "0"; hr < 24; hr++) {
    // Lets say hr == 23 here, and following condition is true (thus adding 23:00)
    if(count%2==0) {
        // ...
    }
}

Then next iteration will do hr++, which isn't less than 24 anymore.

Much cleaner solution will be

for(hr = "0"; hr < 24; hr++) {
    if(hr < 10) {
        apd = "0";
    } else {
        apd = ""
    }

    mi = "00";
    jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr  + ':' + mi + '">' + apd + hr + ':' + mi + '</option>');
    mi = "30";
    jQuery("#bmg_monday_start_hour").append('<option val="' + apd + hr  + ':' + mi + '">' + apd + hr + ':' + mi + '</option>');
}