Jquery:根据下拉选择自动填充多个输入字段的值

时间:2021-03-07 09:51:57

标签: jquery

我想用我从下拉列表中选择的值填充多个输入字段。下面是我的代码

选择:

<div class="col-4">
    <select class="custom-select" id="slbrand">
       <option selected>Please Select</option>
       <option data-brand="Toyota" value="1">Toyota</option>
       <option data-brand="Nissan" value="2">Nissan</option>
       <option data-brand="Mazda" value="3">Mazda</option>
    </select>

HTML 字段(有 68 个):

<table id="producttable" class="display table table-bordered mt-2" style="width:100%" cellspacing="0">
        <thead>
            <tr>
                <th>Metrics</th>
                <th>Value</th>
             </tr>
        </thead>
        <tbody>
<tr>
   <td class="labelfont">Wheels</td>
   <td><input id="row-1-value" name="row-67-value" type="text"></td>
</tr>
.
.
.
<tr>
  <td class="labelfont">Steering</td>
  <td><input id="row-68-value" name="row-68-value" type="text"></td>
</tr>

查询:

//I can fill for one field, but how can I change it to fill all the row values
$('#slbrand').change( function() {
    //Autofill input ward fields with option value
    $("[input]").each(function () {
        $('#row-1-value').val($(this).attr('data-brand'));
    });
});

1 个答案:

答案 0 :(得分:0)

无需使用循环,只需这样做

$('input[id^=row-]').val("what you want");

$('input[id^=row-]') 表示选择所有标签 inputid 开头的 row-

仅供参考

$("[input]").each(function () {
    $('#row-1-value').val($(this).attr('data-brand'));
});

$(this) 不引用您的值已更改,而是引用选择器 [input]