從下拉菜單更新選項

Question

我目前正在嘗試用我的腳本list.gsp更新我的下拉菜單的值。我在JSON中從我的控制器中檢索start_time和end_time值，並試圖用這些新值更新當前的靜態下拉列表。

這是我的電話，現在要更新的選項值，但它不工作：

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

這是我的靜態下拉菜單中，我想從具體值START_TIME不等一路下跌與更新到開始和結束時間下拉的end_time。

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

例如data.days[0].start_time將返回09:00:00和data.days[0].end_time將返回17:00:00，我想填充下拉的開始和結束有9：00-5：00。是否有正確的方式來更新選項值，就像我擁有的​​方式或更好的方式來實現這一點？

Answer 1

您可以將時間轉換爲12小時格式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)); 

編輯：

使用此功能可以得到12小時格式

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; 

    } 

Answer 2

把整個範圍一個在您的select元素中的ID並通過最初的v得到您的選擇Alue，那麼你可以改變text和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。