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

Question

I'm not good in English sorry for that. I try to convey my problem as much as i can.

I created edit page in PHP to edit already saved data. The edit page will display already saved data's near each record there will be edit button after clicking the button model window will open to edit the saved data's., Right on that i facing some challenge.

I need to display Date/Datetime field already stored on Database, based upon the course type already selected. (Eg: If the course type value was already selected as ==1 then automatically date field with value should display, If the value selected as ==2 then datetime field with value should display) Hereby i attached the code.,

<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

You can use a single event handler to process the show/hide of the date,datetime elements. With a few minor alterations to the HTML ( added new classNames to certain elements to aid selection/identification and streamline code ) you could do something like this.

Use a dedicated class to hide the elements and remove that class based upon the selection made by the user.

 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>