我需要显示已存储在数据库中的日期/日期时间字段，基于<select>标记值

Question

我英语不好，抱歉。 我尽量表达我的问题。

我在 PHP 中创建了编辑页面来编辑已保存的数据。 编辑页面将在每条记录附近显示已保存的数据，单击按钮模型窗口将打开以编辑保存的数据后将出现编辑按钮。，就在这我面临一些挑战。

我需要根据已选择的课程类型显示已存储在数据库中的日期/日期时间字段。 （例如：如果课程类型值已经选择为 ==1，则应自动显示带值的日期字段，如果选择为 ==2 的值，则应显示带值的日期时间字段）特此附上代码。，

<select name="selectCourseType" id="editCourseType" required>
    <option value=""  required>Select Courses Type</option>
<?php 
    $sqlEdit = mysqli_query($link,"SELECT * FROM courses_type ORDER BY ct_id DESC");
    $row = mysqli_num_rows($sqlEdit);
    while ($row = mysqli_fetch_array($sqlEdit)){
        $ctID = $row['ct_id'];
        $ctName = $row['ct_name'];
?>
    <option <?php if ($ctID==$ctType){ ?> selected="selected" <?php } ?>  value="<?php echo $ctID ?>" ><?php echo $ctName ?></option>
        <?php } ?>
</select>
                    
                
<div id="editDeadlineDtfrom" hidden>                           
    <input class="form-control" type="date" name="deadlinedatefrom" />                        
</div>

<div id="editDeadlineDtto" hidden>                           
     <input class="form-control" type="date" name="deadlinedateto" />                          
</div>

<div id="editDurationDtfrom" hidden>                          
    <input class="form-control" type="datetime-local" name="durationdatefrom" />                         
</div>

<div id="editDurationDtto" hidden>                  
    <input class="form-control" type="datetime-local" name="durationdateto" />                            
</div>


 <script>
    document.getElementById("editCourseType").addEventListener("change", function() {
        const isDeadline = this.value === "2"
        document.getElementById("editDeadlineDtfrom").hidden = !isDeadline
        document.getElementById("editDeadlineDtto").hidden = !isDeadline
    })
    document.getElementById("editCourseType").addEventListener("change", function() {
        const isDuration = this.value === "1"
        document.getElementById("editDurationDtfrom").hidden = !isDuration
        document.getElementById("editDurationDtto").hidden = !isDuration
    })

</script>

Answer 1

您可以使用单个事件处理程序来处理日期、日期时间元素的显示/隐藏。 通过对 HTML 进行一些小的改动（向某些元素添加新的类名以帮助选择/识别和简化代码），您可以执行类似的操作。

使用专用类隐藏元素并根据用户所做的选择删除该类。

 document.querySelector('select[name="selectCourseType"]').addEventListener('change', function(e) { const cn = 'hidden'; //re-hide all DIV elements document.querySelectorAll('.ctrls').forEach(n => { if( !n.classList.contains(cn) ) n.classList.add(cn); }); // unhide specific DIV elements based upon user selection switch (Number(this.value)) { case 1: document.querySelectorAll('.duration').forEach(n => n.classList.remove(cn)); break; case 2: document.querySelectorAll('.deadline').forEach(n => n.classList.remove(cn)); break; } });

 .hidden { display: none; } .ctrls{ margin:0.25rem; padding:0.25rem; }

 <select name="selectCourseType" required> <option selected hidden disabled>Select Courses Type <option value=1>1-Duration <option value=2>2-Deadline </select> <div class='ctrls hidden deadline'> <input class="form-control" type="date" name="deadlinedatefrom" /> </div> <div class='ctrls hidden deadline'> <input class="form-control" type="date" name="deadlinedateto" /> </div> <div class='ctrls hidden duration'> <input class="form-control" type="datetime-local" name="durationdatefrom" /> </div> <div class='ctrls hidden duration'> <input class="form-control" type="datetime-local" name="durationdateto" /> </div>