如何在將innerHTML注入DOM之後立即設置選定的選項？

我有一個php腳本，以15分鐘的增量生成開始時間和結束時間之間的時間列表。在HTML方面，我有兩個選擇下拉菜單的開始和結束時間，我爲兩個選擇下拉菜單加載相同的php腳本。我將列表注入到DOM的innerHTML中，然後使用jQuery將結束時間設置爲列表中的最後一個值。如何在將innerHTML注入DOM之後立即設置選定的選項？

我可以在HTML源代碼中看到最後一個結束時間值被選中，但在選擇下拉列表中，我只能看到結束時間的第一個值。我如何更新/刷新選擇下拉菜單以顯示實際選定的值？

function addEmployee() { 
     var num = 1; 
     var fields= html("employees").innerHTML; 
     num += html("employees").getElementsByTagName('a').length; 
     if(num <= 14) { 
      fields+="<div id=\"employee_line"+num+"\">"; 
      fields+="<label for=\"employeeName"+num+"\">Employee: <select name=\"employeeName"+num+"\"><?php echo $opts; ?></select></label> "; 
      if(scheduler.templates.event_date(new Date(html("start_date").value)) == "07:00") { 
       fields+="<label for=\"employeeTimeStart"+num+"\">Start Time: <select name=\"employeeTimeStart"+num+"\"><?php echo $time_morning; ?></select></label> "; 
       fields+="<label for=\"employeeTimeEnd"+num+"\">End Time: <select name=\"employeeTimeEnd"+num+"\"><?php echo $time_morning; ?></select></label> "; 
      } else if(scheduler.templates.event_date(new Date(html("start_date").value)) == "12:00") { 
       fields+="<label for=\"employeeTimeStart"+num+"\">Start Time: <select name=\"employeeTimeStart"+num+"\"><?php echo $time_afternoon; ?></select></label> "; 
       fields+="<label for=\"employeeTimeEnd"+num+"\">End Time: <select name=\"employeeTimeEnd"+num+"\"><?php echo $time_afternoon; ?></select></label> "; 
      } else if(scheduler.templates.event_date(new Date(html("start_date").value)) == "17:00") { 
       fields+="<label for=\"employeeTimeStart"+num+"\">Start Time: <select name=\"employeeTimeStart"+num+"\"><?php echo $time_evening; ?></select></label> "; 
       fields+="<label for=\"employeeTimeEnd"+num+"\">End Time: <select name=\"employeeTimeEnd"+num+"\"><?php echo $time_evening; ?></select></label> "; 
      } 
      fields+="<a href=\"#\" onclick=\"delete_employee("+num+")\">del</a>"; 
      fields+="<br /></div>"; 
      document.getElementById("employees").innerHTML = fields; 
      $('select[name^="employeeTimeStart' + html("employees").getElementsByTagName('a').length + '"]').children('option').each(function(index, obj) { 
       var date = new Date(html("start_date").value.toString("r")); 
       if(scheduler.templates.event_date(date) == $(obj).val()) { 
        $(obj).attr("selected", "selected"); 
       } 
      }); 
      $('select[name^="employeeTimeEnd' + html("employees").getElementsByTagName('a').length + '"]').children('option').each(function(index, obj) { 
       var date = new Date(html("end_date").value.toString("r")); 
       if($(obj).val() == scheduler.templates.event_date(date)) { 
        $(obj).attr("selected", "selected"); 
       } 
      }); 
     } else { 
      alert("Maximum number of employees reached."); 
     } 
}

來源

2013-05-22 Craig

代碼是值得1024個字... ;-) –

@ T.J.Crowder像2^10 REF。 – Kiruse

我添加了代碼。 – Craig

使用.prop更改所選屬性。

$(obj).prop("selected", true);

或者，也可以代替做

$(theselect).val(thevalue);

來源

2013-05-22 15:21:37

謝謝，$（obj）.prop爲我工作！ – Craig

你可能會需要使用。對

$("select").on("change", function(event){ 
alert($(this).val()); 
});

來源

2013-05-22 14:58:14

如何在將innerHTML注入DOM之後立即設置選定的選項？

回答

相關問題