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>

然后使用类选择器使用它绑定事件处理程序，使用.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'
        });
    }
});

选项选择仅适用于一个下拉列表

2 个答案: