Question

我有这个HTML代码： https://jsfiddle.net/wjkh6hb7/1/

当我更改选择选项时，它应该更新最近的输入，但实际上它不会。

我认为这是因为选择名称RAT_Rates[]，因为我需要将结果作为数组。

任何人都可以解释我如何改变这一点？

这里是JS代码：

$("select[name='RAT_Rates[]']").on('change', function() {
    var selected = $(this).find('option:selected');

    var name = selected.attr('data-name');
    var description = selected.attr('data-description');
    var rate = selected.attr('data-rate');

    if(rate!='') {
        $(this).closest("tr").find("input[name='BIL_Rate[]']").val(rate).prop('readonly', true);
    }
    else {
        $(this).closest("tr").find("input[name='BIL_Rate[]']").val('').prop('readonly', false);
    }
});

感谢。

Answer 1

它不起作用，因为选择器不存在。

var s = $( "select[name='RAT_Rates[]']" ).length;
console.log( s ); // 0

尝试使用下拉列表选择器：

$( "select[name='BIL_RateId[]']" )

小提琴：https://jsfiddle.net/eg4eLcL1/

Answer 2

其无效的原因 -

1.您调用不存在的选择器select[name='RAT_Rates[]']。 2.为两个名称属性选择相同的名称。对于两个名称属性，它们应该是不同的。例如BIL_RateId，"BIL_Rate[]和BIL_RateId1，"BIL_Rate1[]

工作示例小提琴：

Fiddle

Html：

<table class="table table-striped table-bordered">
    <tbody>
        <tr>
            <th width="60%">Date</th>
            <th width="40%">Rate</th>
        </tr>
        <tr>
            <th>
                Today<br>
                <select name="BIL_RateId[]" class="form-control">
                    <option value="" data-name="" data-description="" data-rate="" selected="">Tarif personnalisé</option>
                    <option value="3" data-name="Spécial étudiant" data-description="Spécial étudiant" data-rate="99.99">Spécial étudiant - $ 99.99</option>
                </select>
            </th>
            <td>
                <div class="col-sm-12">
                    <input type="text" name="BIL_Rate[]" class="form-control" required="">
                </div>
            </td>
        </tr>
        <tr>
            <th>
                Tomorrow<br>
                <select name="BIL_RateId1[]" class="form-control">
                    <option value="" data-name="" data-description="" data-rate="" selected="">Tarif personnalisé</option>
                    <option value="3" data-name="Spécial étudiant" data-description="Spécial étudiant" data-rate="99.99">Spécial étudiant - $ 99.99</option>
                </select>
            </th>
            <td>
                <div class="col-sm-12">
                    <input type="text" name="BIL_Rate1[]" class="form-control" required="">
                </div>
            </td>
        </tr>
    </tbody>
</table>

JS：

$("select[name='BIL_RateId1[]']").on('change', function() {
    var selected = $(this).find('option:selected');
console.log(selected);
    var name = selected.attr('data-name');
    var description = selected.attr('data-description');
    var rate = selected.attr('data-rate');

    if(rate!='') {
        $(this).closest("tr").find("input[name='BIL_Rate1[]']").val(rate).prop('readonly', true);
    }
    else {
        $(this).closest("tr").find("input[name='BIL_Rate1[]']").val('').prop('readonly', false);
    }
});

在选择更改时使用jQuery更新最近的输入

2 个答案: