Month in dropdown selection not in proper sequence

Question

I need a dropdown selection for expiry month [Jan, Feb....Dec] with values[01(Jan),02(Feb),03,.....12] for each option respectively. I have used jquery.

But it shows October 10 November 11 December 12 January 01 .....so on.

I need January first.

  var parent = $('#main_div');
  var line_segment = $('<div>');
  var line_segment_nobackground = $('<div>');
  var row_wrapper = $('<div>',{'class':'row_wrapper_leftmargin'});
  var D_segment = line_segment.clone();
  var D_wrapper = row_wrapper.clone();
  var D_word = $('<div>',{ 'class':'segment_text_P text_align 
         padding_top_5', text:'Expiry Month' });
  var D_divider = $('<div>',{ 'class':'segment_5 text_calign padding_top_5', text:':' });
  var D_field = $('<select>', { 'class':'select_AccL', id:"month" });
  var data = {
    '01': 'January',
    '02': 'February',
    '03':'March',
    '04':'April',
    '05':'May',
    '06':'June',
    '07':'July',
    '08':'August',
    '09':'September',
    '10':'October',
    '11':'November',
    '12':'December'
}   

for(var val in data) {
    $('<option />', {value: val,text: data[val]}).appendTo(D_field);
}

//or wherever it should be

   D_wrapper.append(D_word);
   D_wrapper.append(D_divider);
   D_wrapper.append(D_field);
   D_segment.append(D_wrapper);
   parent.append(D_segment);

I believe this is because some browsers order object keys numeric-first. So 10 is put before 01, which is seen as non-numeric. I suggest [keeping all keys numeric](https://jsfiddle.net/jx6yz93v/) or using an array. — showdev, Mar 25 '19 at 23:40
Possible duplicate of [Elements order in a "for (… in …)" loop](https://stackoverflow.com/questions/280713/elements-order-in-a-for-in-loop) — showdev, Mar 25 '19 at 23:41
I think it would be helpful to offer a little explanation of the problem and why you chose your solution. The expertise of a 140k+ member could be invaluable to this and future readers. — showdev, Mar 26 '19 at 01:39
@kritika555 Thanks for that! Sorry, I was referring to charlietfl but forgot to tag that user. — showdev, Mar 26 '19 at 02:14

kritika555 · Accepted Answer · 2019-03-26T01:49:04.220

  var data = [];
  data['1'] = 'January - 01';
  data['2'] = 'February - 02';
  data['3'] = 'March - 03';   
  data['4'] = 'April - 04';
  data['5'] = 'May - 05';
  data['6'] = 'June - 06';
  data['7'] = 'July - 07';
  data['8'] = 'August - 08';
  data['9'] = 'September - 09';
  data['10'] =  'October - 10';
  data['11'] = 'November - 11';
  data['12'] = 'December - 12';

  for(var val in data) {
  $('<option />', {value: ("0" + val).slice(-2),text: 
   data[val]}).appendTo(D_field);
   }

Thanks I used array for storing data and also referred to the below solution :

How to format numbers by prepending 0 to single-digit numbers?

I needed to send values in the form such as: 01 for (jan), (02) for feb ...and soon because I am creating a form for credit card details, which links to a payment gateway. So, I think prepending 0 to single digit number when sending data is the solution. Whereas, the value in the option could be 1(jan), 2(feb) for it to display in correct order.

Month in dropdown selection not in proper sequence

1 Answers1