CODEWITHSUNDEEP
jquerygrailshtml-select
thehoule64
thehoule64

Reputation: 1859

Updating option from drop down menu

I am currently trying to update the value of my drop down menu with my script in my list.gsp. I am retrieving the start_time and end_time values from my controller in a JSON and trying to update my current static drop downs with those new values.

This is my call to update the option value now but it does not work:

    $("#mondayStartTime").html(data.days[0].start_time);

This is my static drop down menu that I want to update with from the specific value start_time ranging all the way down to the end_time for both start and end time drop downs. 

    <tr>
        <td style="text-align: center; width: 115px;">
            <select>
                 <option id="mondayStartTime>--Start--</option>

For example data.days[0].start_time would return 09:00:00 and data.days[0].end_time would return 17:00:00 and I want to populate the drop down for both start and end to have 9:00-5:00. Is there a correct way to update the option values like the way I have or a better way of achieving this?

Upvotes: 2

Views: 179

Answers (2)

NullPointerException
NullPointerException

Reputation: 3814

You can convert the time to 12 hr format fiddle

function tConvert (time) {
 // Check correct time format and split into components
  time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

 if (time.length > 1) { // If time format correct
   time = time.slice (1);  // Remove full string match value
   time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
   time[0] = +time[0] % 12 || 12; // Adjust hours
  }
   return time.join (''); // return adjusted time or original string
}



  $("#mondayStartTime").html(tConvert (data.days[0].start_time));

EDIT :

Use this to get the whole range in 12 hr format

 function tConvert (time) {
 // Check correct time format and split into components
  time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

  if (time.length > 1) { // If time format correct
    time = time.slice (1);  // Remove full string match value
    time[3] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
    time[0] = +time[0] % 12 || 12; // Adjust hours
   }
  return time.join (''); // return adjusted time or original string
  }

 alert(buid('09:00:00','18:00:00'));
 function buid(start,end)
  {
   var strt =   start.split(':')[0]; 
   var endd =   end.split(':')[0];
   var rangeArray = new Array();
   for(i=strt;i<=endd;i++)
   {
          rangeArray.push(i+':00:00');
   }

    var timeArray = new Array();
   for(j in rangeArray)
   {
        timeArray.push(tConvert(rangeArray[j]));
   }        
   console.log(timeArray);    
   return timeArray;

   }

Upvotes: 0

user800014
user800014

Reputation:

Put an id in your select element and get your option by the initial value, then you can change text and value.

<select name="test" id="test">
  <option value="mondayStartTime">--Start--</option>
</select>
<input type='button' id='changeText' value='Change me!' />


$(function(){
    $('#changeText').click(function(){
        $('#test option[value=mondayStartTime]').text("09:00-17:00");
        $('#test option[value=mondayStartTime]').val("09:00,17:00");
    });
});

Working fiddle.

Upvotes: 1

Related Questions