javascript - 如何使用选择下拉列表返回 html 行数据

Question

有没有办法可以在选择/下拉事件上console.log一行数据？例如，这是我的表格:

<table class="table table-striped">
        <thead>
            <tr>
                <th style="display:none;"></th>
                <th>Product Code</th>
                <th>Brand</th>
                <th>Category</th>
                <th>Description</th>
                <th>Quantity</th>
                <th>Unit Price</th>
                <th>Item Status</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{#each context.order_item}}
            <tr>
                <td style="display:none;">{{id}}</td>
                <td>{{product_code}}</td>
                <td>{{brand}}</td>
                <td>{{category}}</td>
                <td>{{description}}</td>
                <td>{{quantity}}</td>
                <td>{{invoice_price}}</td>
                <td>
                    <select id="item_status" class="item_status">
                        <option selected>{{status}}</option>
                        <option>Order Confirmed</option>
                        <option>Order Completed</option>
                    </select>
                </td>
                <td><button class="btn btn-danger">Cancel Item</button></td>
            </tr>
            {{/each}}
        </tbody>
    </table> 

当我单击选择下拉列表时，我希望它能够 console.log 'Brand' 的值。伪代码:

$("#.item_status").change(function() {
    console.log(this.row.brand); //need to console.log the value of brand in this row
});

有人可以帮忙吗？

Answer 1

如果它始终是该行的第三个单元格，您可以这样做:

 $(".item_status").change(function() {
   var brnd = $(this).closest('tr').find('td').eq(2).html()
   console.log(brnd)
 }

此外，类选择器上没有 # fiddle -https://jsfiddle.net/sx1c9xpz/