Question

我有一个php脚本，生成一个开始时间和结束时间之间的时间列表，增量为15分钟。在HTML方面，我有两个选择下拉开始和结束时间，我为两个选择下拉列表加载相同的PHP脚本。我将列表注入到DOM的innerHTML中，然后我使用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

您需要使用.on

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

Answer 2

使用.prop更改所选属性。

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

或者你也可以改为

$(theselect).val(thevalue);

如何在将innerHTML注入DOM后立即设置所选选项？

2 个答案: