Как установить выбранную опцию сразу после инъекции innerHTML в DOM?

Question

У меня есть сценарий php, который генерирует список времени между временем начала и окончанием с шагом в 15 минут. На стороне HTML у меня есть два выпадающего списка для начала и окончания времени, и я загружаю один и тот же сценарий php для обоих выпадающих меню. Я вставляю список в innerHTML DOM, затем я использую jQuery для установки конечного времени на последнее значение в списке.

Я могу видеть в источнике 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."); 
     } 
} 

Answer 1

Используйте .prop для изменения выбранного свойства.

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

В качестве альтернативы вы могли бы вместо того, чтобы сделать

$(theselect).val(thevalue); 

Answer 2

Вам потребуется, чтобы использовать.

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