Question

我认为这是一项简单的任务。

下拉列表表格，以及每行末尾的文本框。

我想做的就是循环遍历表格的每一行，获取“小时下拉值”并乘以“费率下拉值” - 并将结果放在文本框中。

在尝试获取下拉列表值时，我只是一直未定义。

我的HTML是：

<table class="hours-table">
<tr>
    <th>Hours</th>
    <th>Hourly Rate</th>
    <th>Date Total</th>
</tr>
<tr>
    <td>
        <select id="HoursSelected1" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected1" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
<tr>
    <td>
        <select id="HoursSelected2" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected2" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
<tr>
    <td>
        <select id="HoursSelected3" name="HoursSelected" class="hours">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td>
        <select id="RateSelected3" name="RateSelected" class="rate">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </td>
    <td class="date-total">
        <input type="text" class="date-total" name="date-total-01" value="" />
    </td>
</tr>
</table>
<p><a class="calculate" href="#" title="calculate row">Calculate</a>

</p>

我的jQuery是：

$(document).ready(function () {
$('.calculate').on('click', function () {
    $('.hours-table tr').each(function () {
        var hours = $(this).find('select.hours').val();
        var rate = $(this).find('select.rate').val();
        var dateTotal = (hours * rate);
        $(this).find('input.date-total').val(dateTotal);
    }); 
    return false;
}); 
});

有人能看到我出错的地方吗？这里有一个小提琴：http://jsfiddle.net/Lr5pq/26/

谢谢Mark，

Answer 1

试试这个：

$(document).ready(function () {
$('.calculate').on('click', function () {
    $('.hours-table tr').each(function () {
        var hours = $(this).find('select.hours > option:selected').val();
        var rate = $(this).find('select.rate > option:selected').val();
        var dateTotal = (hours * rate);
        $(this).find('input.date-total').val(dateTotal);
    }); 
    return false;
}); 
});

Answer 2

您的代码中有2个问题，第一个是忽略计算中的第一行（表格中的标题行），第二个使用不推荐使用的return false;，我们使用e.preventDefault();代替你可以解决它们：

        $('.hours-table tr').each(function () {
            var hours = $(this).find('select.hours').val();
            var rate = $(this).find('select.rate').val();
            if (hours !== undefined && rate !== undefined) {
                var dateTotal = (hours * rate);
                $(this).find('input.date-total').val(dateTotal);
            }
        });
        e.preventDefault();

顺便说一句，如果我是的话，我会改变它：

$(document).ready(function () {
    $('.calculate').on('click', function (e) {
        $('.hours-table tr').each(function () {
            var hours = $(this).find('select.hours>option:checked').val();
            var rate = $(this).find('select.rate>option:checked').val();

            //this is for your header row
            if (hours !== undefined && rate !== undefined) {
                var dateTotal = (hours * rate);
                $(this).find('input.date-total').val(dateTotal);
            }
        });
        e.preventDefault();
    });
});

如您所见，我们可以使用:checked代替:selected来选择选择节点中的所选选项。

这是你的工作jsfiddle

jQuery迭代表并选择下拉列表

2 个答案: