Question

按照下表，如何在select change上填充行输入？

我有几行。

<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="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 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="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th>
            <td>
                <div class="col-sm-12">
                    <input type="text" name="BIL_Rate[]" class="form-control" required="">
                </div>
            </td>
        </tr>
    </tbody>
</table>

我其实：

$('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');

    $(this).next('input[name=BIL_Rate]').val(rate);
});

非常感谢。

Answer 1

您可以使用parent（）并使用find（）在里面找到该类。请查看下面的更新代码：

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="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th>
        <td>
            <div class="col-sm-12">
                <input type="text" name="BIL_Rate[]"  class="form-control input_rate" required="">
            </div>
        </td>
    </tr>
    <tr>
        <th>Today<br><select name="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th>
        <td>
            <div class="col-sm-12">
                <input type="text" name="BIL_Rate[]"  class="form-control input_rate" required="">
            </div>
        </td>
    </tr>
    <tr>
        <th>Today<br><select name="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select></th>
        <td>
            <div class="col-sm-12">
                <input type="text" name="BIL_Rate[]"  class="form-control input_rate" required="">
            </div>
        </td>
    </tr>
</tbody>

Javascript：

 $('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');

$(this).parent().parent().find('.input_rate').val(rate);
});

Answer 2

要使用属性选择器，您需要使用两组引号一套用于选择器本身......
还有一个是您要查找的属性值。

因此$('select[name=RAT_Rates]')应为$("select[name='RAT_Rates']")。

然后（这是次要的，但有效的HTML始终有帮助），您的select元素未关闭。

＆＃13;

$("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');

  $(this).closest("tr").find("input[name='BIL_Rate[]']").val(rate);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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="RAT_Rates" class="form-control">
          <option data-name="" data-description="" data-rate="" selected="">Custom</option>
          <option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option>
        </select>
      </th>
      <td>
        <div class="col-sm-12">
          <input type="text" name="BIL_Rate[]" class="form-control" required="">
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

这是你想要的 -

$('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');
    $(this).closest('td').next('td').find($("input[name='BIL_Rate[]']")).val(rate);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
    <tbody>
        <tr>
            <th width="60%">Date</th>
            <th width="40%">Rate</th>
        </tr>
        <tr>
            <td>
            <div>
            Today
            </div> 
              <select name="RAT_Rates" class="form-control">
              <option data-name="" data-description="" data-rate="" selected="">Custom</option>
              <option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option>
              </select>
            </td>
            <td>
                <div class="col-sm-12">
                    <input type="text" name="BIL_Rate[]" class="form-control" required="">
                </div>
            </td>
        </tr>
        <tr>
         <td><div>
         Tomorrow
         </div>
            <select name="RAT_Rates" class="form-control"><option data-name="" data-description="" data-rate="" selected="">Custom</option><option data-name="Special" data-description="Special" data-rate="99.99"> Special - $ 99.99</option></select>
            </td>
            <td>
               <div class="col-sm-12">
                    <input type="text" name="BIL_Rate[]" class="form-control" required="">
                </div>
            </td>
        </tr>
    </tbody>
</table>

由于

在选择更改后填充输入

3 个答案: