在選擇框上更改Ajax中的狀態

Question

我有一個問題，所以，此代碼僅適用於第一個選擇框，我不明白為什么。 對於第一個選擇框，對數據庫的更新工作正常，但是如果我嘗試更改第二個選擇框的狀態，則狀態保持不變。 你能幫助我嗎？ 對不起我的英語不好

我的觀點 ：

{% for gift in aFilterGifts %}

<form action="" id="updateStatus" method="post">
    <select id="statusSelect"
            name="{{ gift.id }}"
            class="form-control"
            onChange="updateCadeauStatus({{ gift.id }})">
            {% for key,statut in form_logistique.statut.choices %}
                <option value="{{ key }}"
                    {% if gift.etat == key %}selected="selected"{% endif %}>
                    {{ statut }}
                 </option>
            {% endfor %}
   </select>
</form>
{% endfor %}

 <script>
    function updateCadeauStatus(id) {
        var id = id;
        var selectedName = $("#statusSelect option:selected").val();
        var url_deploy = 'http:localhost/updateStatus'
        console.log(id);
        console.log(selectedName);
        $.ajax({
            url: url_deploy,
            type: "POST",
            async: true,
            data: { id_cadeau:id, id_status:selectedName}
        });
    }
</script>

控制器：

public function updateStatus(){
    $iGiftId    = $_POST['id_cadeau'];
    $iNewStatus = $_POST['id_status'];
    $bUpdate = $this->updateStatusByGiftId($iGiftId, $iNewStatus);

}

該模型 ：

public static function updateStatusByGiftId($iGiftId, $iStatusId){
    $request = sprintf( ' UPDATE `%s` set etat = %d WHERE id_instant_gagnant = %d ', $table, $iStatusId, $iGiftId);

    return Mysqli::query($request, $database);
}

提前謝謝。

Answer 1

您所有的選擇框都具有相同的id id="statusSelect" 。 那不是有效的HTML。 一種解決方案是將禮物id附加到id標記上以創建唯一的id：

{% for gift in aFilterGifts %}
    <form action="" id="updateStatus{{ gift.id }}" method="post">
        <select id="statusSelect{{ gift.id }}"
                name="{{ gift.id }}"
...

對於腳本：

<script>
    function updateCadeauStatus(id) {
        var id = id,
            selectedName = $("#statusSelect" + id + " option:selected").val(),
            url_deploy = 'http:localhost/updateStatus';

        console.log(id);
...