選項選擇僅適用於一個下拉菜單

Question

我的表格中有2列服務員動作和任務狀態，如下所示

當我單擊分配時，應更改為已分配，取消應更改為未決。

我為此寫了jquery，但它只影響到一行，而對剩余的行不起作用。

我的jQuery

$("#stat").on('change', function (e) {
e.preventDefault();
if($(this).val() == "allocate")
{
    $("#status").val("Allocated");
    $(".hover").css({ 'color': 'green' });
}else if($(this).val() == "cancel"){
    $("#status").val("pending");
    $(".hover").css({ 'color': 'red' });
}
});

我的HTML

<td id="s3">

                    <button class="btn btn-primary" type="submit" name="submit">submit</button>

                    <select style="width: 150px;" class="blue" id="stat" data-style="btn-warning" name="stat">

                        <option value="allocate" id="<?php echo $emp["id"]; ?>" <?php echo (!empty($emp["stat"]) && $emp["stat"] == 'allocate') ? 'selected' : ''; ?>>allocate</option>

                        <option value="cancel" id="<?php echo $emp["id"]; ?>" <?php echo (!empty($emp["stat"]) && $emp["stat"] == 'cancel') ? 'selected' : ''; ?>>cancel</option>
                    </select>

                </td>  

                <td id="s4">
                    <select style="width: 150px;" class="blue" id="status" data-style="btn-primary" name="status">

                        <option value="pending" <?php echo (!empty($emp["stat"]) && $emp["stat"] == 'cancel') ? 'selected' : ''; ?>>Pending</option>

                        <option value="Allocated" <?php echo (!empty($emp["stat"]) && $emp["stat"] == 'allocate') ? 'selected' : ''; ?>>Allocated</option>
                        <option value="Engaged">Engaged</option>
                    </select>

                </td>   

Answer 1

我相信您的表行是動態的。 如果可行，您可以嘗試一下。

 $("document").on('change', "#stat", function (e) { e.preventDefault(); if($(this).val() == "allocate") { $("#status").val("Allocated"); $(".hover").css({ 'color': 'green' }); } else if($(this).val() == "cancel") { $("#status").val("pending"); $(".hover").css({ 'color': 'red' }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

將常見的CSS類（即stat和status分配給<select>元素的

<td> 
    <select class="blue stat">
    </select> 
 </td>
<td>
     <select  class="blue status">
    </select> 
</td>

然后使用Class Selector綁定使用它的事件處理程序，使用.closest()遍歷到一個公共父對象，然后使用.find()定位所需的元素

$(".stat").on('change', function (e) {
    e.preventDefault();
    var statusSelect = $(this).closest('tr').find('select.status');
    if ($(this).val() == "allocate") {
        statusSelect.val("Allocated");
        $(".hover").css({
            'color': 'green'
        });
    } else if ($(this).val() == "cancel") {
        statusSelect.val("pending");
        $(".hover").css({
            'color': 'red'
        });
    }
});