javascript - 更改选择框上 ajax 的状态

Question

我有一个问题，所以，这段代码仅适用于第一个选择框，我不明白为什么。对于数据库上的第一个选择框更新工作正常，但如果我尝试更改第二个选择框的状态，状态将保持不变。你能帮助我吗？抱歉我的英语不好

我的观点:

{% for 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>

Controller :

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);
...