為什么我不能在 php 中填充附加的 select？

Question

clientAdd.php

 <?php 

                    $office = "SELECT * FROM tblOffice";
                    $office_qry = mysqli_query($conn, $office);

                    ?>

                       <div class="input-field"> 
                        <label> Office </label>
                    <select id="office-dd" name="office-dd">
                    <option disabled selected value>Select Office</option>
                        <?php while ($row = mysqli_fetch_assoc($office_qry)) : ?>
                            <option value="<?php echo $row['officeId']; ?>"> <?php echo $row['officeName']; ?> </option>
                            <?php endwhile; ?>
                    </select>
                        </div> 


<div class="clientAddPosi" id="clientAddPosi">
          <label for="formGroupExampleInput"> Position Title </label>
                <div class="form-group">
                    <input type="text" class="form-control" id="filterPosi" placeholder="Filter Positions" name="filterPosi" style=" transition: ease 0.4s;">
                      <select class="form-control" id="posi-dropdown" name="posi-dropdown" style="transition: ease 0.4s !important;" multiple="multiple">
                    </select>
                <hr>
                </div>
        </div>

<script>
 $('#office-dd').on('change', function() {
        var officeId = this.value;
        // console.log(country_id);
        $.ajax({
            url: '../Module - Client/fetch-position.php',
            type: "POST",
            data: {
                officeData: officeId
            },
            success: function(result) {
                $('#posi-dropdown').html(result);
                $('#posiDDEarn').html(result);
                $('#poSI').html(result);
            }
        });
    });
</script>

#posi-dropdown、#posiDDEarn 都工作正常，因為它們在另一個文件 (clientEarningsInsert.php) 中進行了硬編碼，但是當添加 select（#posI）時，它不起作用

clientEarningsInsert.php

<div class="clientAddWage" id="clientAddWage">
 <label for="formGroupExampleInput"> Position Title </label>
        <div class="form-group" style="transition: ease 0.4s !important; margin-bottom: 23px;">
            <select class="form-control" name="posiDDEarn" id="posiDDEarn" onchange="getId(this.value)">
            <option value=""></option>
             </select>
        </div>  
</div>

 <button type="button" class="btn btn-primary btn-lg btn-block" style="width: 100% !important; margin-top: 6% !important" onclick="clientAddWage()" id="AddPosition"> Add Earning </button>
 
<script>
 function clientAddWage() {
      $("#clientAddWage").append(   
        `<div id="newWage"> <label for="formGroupExampleInput"> Position Title </label>
        <div class="form-group" style="transition: ease 0.4s !important; margin-bottom: 23px;">
           <select class="form-control" name="poSI" id="poSI" onchange="getId(this.value)">
            <option value=""></option>
             </select> 
 );
      wageIndex++;
    }
</script>

Output輸出/問題

如果代碼不干凈/寫得不好，我真的很抱歉，我仍然是一個初學者，正在尋找改進的方法。 關於這方面的任何幫助都會對我有很大幫助。 謝謝！

Answer 1

如果您添加兩個或更多職位並更改辦公室，它只會填充第一個職位。 為什么？ 好吧，您一直在添加具有相同 ID“poSI”的元素……但它是一個ID 。 身份證最重要的是什么？ 當然，我相信您知道，它必須唯一地標識某些東西。 所以如果你創建多個具有相同 ID 的元素，顯然它打破了這個簡單的規則。

所以當你執行$('#poSI').html(result); Javascript 只會識別它找到的具有該 ID 的第一個元素。 其他人違反規則，所以他們被忽略了。 解決方案？ 使用 class 作為您的選擇器：

<select class="form-control poSI" name="poSI" onchange="getId(this.value)">

和

$('.poSI').html(result);