更改上一个下拉菜单时设置下一个下拉菜单的值

时间：2020-02-22 08:07:35

标签： jquery ajax

当我选择任何偶​​数下拉列表时，下一个下拉列表的值将与我为上一个下拉列表选择的值相同。例如，当我更改第二个下拉菜单时，第三个下拉菜单的值将与第二个下拉菜单相同

$('#FinancialDataTable td:nth-child(2n)').find('select').on('change', function() {
  var abc = $(this).next("input:first").val();
  alert(abc);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="FinancialDataTable" class="table table-bordered table-hover">
  <tbody>
    <tr>
      <th>From</th>
      <th>To</th>
      <th>Weight (In KG)</th>
      <th>Rate (Rate Per KG)</th>
      <th><input type="button" class="btn btn-primary addOption" value="Add Row"></th>
    </tr>
    <tr>
      <td>
        <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
          <option value="">Seller Firm</option>
          <option value="2">XYZ</option>
        </select>
      </td>
      <td>
        <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
          <option value="">Select Purchaser Firm</option>
          <option value="1">Nugen Feeds</option>
          <option value="4">Vasu &amp; Sons</option>
        </select>
      </td>
      <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
      <td>
        <input type="text" class="form-control rate" name="rate[]" required=""></td>
      <td> <button class="btn btn-primary removeOption">Remove Rule</button></td>
    </tr>
    <tr>
      <td>
        <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
          <option value="0">Select Seller Firm</option>
          <option value="1">Nugen Feeds</option>
          <option value="4">Vasu &amp; Sons</option>
        </select>
      </td>
      <td>
        <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
          <option value="">Select Purchaser Firm</option>
          <option value="1">Nugen Feeds</option>
          <option value="4">Vasu &amp; Sons</option>
        </select>
      </td>
      <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
      <td>
        <input type="text" class="form-control rate" name="rate[]" required=""></td>
      <td> <button class="btn btn-primary removeOption">Remove Rule</button></td>
    </tr>
    <tr>
      <td>
        <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
          <option value="0">Select Seller Firm</option>
          <option value="1">Nugen Feeds</option>
          <option value="4">Vasu &amp; Sons</option>
        </select>
      </td>
      <td>
        <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
          <option value="">Select Purchaser Firm</option>
          <option value="1">Nugen Feeds</option>
          <option value="4">Vasu &amp; Sons</option>
        </select>
      </td>
      <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
      <td>
        <input type="text" class="form-control rate" name="rate[]" required=""></td>
      <td> <button class="btn btn-primary removeOption">Remove Rule</button></td>
    </tr>
    <tr>
      <td>
        <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
          <option value="0">Select Seller Firm</option>
          <option value="1">Nugen Feeds</option>
          <option value="4">Vasu &amp; Sons</option>
        </select>
      </td>
      <td>
        <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
          <option value="">Seller Firm</option>
          <option value="3">ABC</option>
        </select>
      </td>
      <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
      <td>
        <input type="text" class="form-control rate" name="rate[]" required=""></td>
      <td> <button class="btn btn-primary removeOption">Remove Rule</button></td>
    </tr>
  </tbody>
</table>

2 个答案:

答案 0 :(得分：1)

检查以下代码段，希望对您有所帮助。

// Change in 1st column also reflect in 2nd column
$(document).on('change', '#FinancialDataTable td:nth-child(1) select', function() {
  $(this).parent().parent().find('td:nth-child(2) select').val($(this).val());
});
// Change in 2nd column also reflect in 1st column
$(document).on('change', '#FinancialDataTable td:nth-child(2) select', function() {
  $(this).parent().parent().find('td:nth-child(1) select').val($(this).val());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container-fluid my-2">
  <div class="row">
    <div class="col-sm-12">
      <table id="FinancialDataTable" class="table table-bordered table-hover">
        <tbody>
          <tr>
            <th>From</th>
            <th>To</th>
            <th>Weight (In KG)</th>
            <th>Rate (Rate Per KG)</th>
            <th><input type="button" class="btn btn-primary addOption" value="Add Row"></th>
          </tr>
          <tr>
            <td>
              <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
                <option value="0">Select Seller Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td>
              <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
                <option value="0">Select Purchaser Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
            <td><input type="text" class="form-control rate" name="rate[]" required=""></td>
            <td><button class="btn btn-primary removeOption">Remove Rule</button></td>
          </tr>
          <tr>
            <td>
              <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
                <option value="0">Select Seller Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td>
              <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
                <option value="0">Select Purchaser Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
            <td><input type="text" class="form-control rate" name="rate[]" required=""></td>
            <td><button class="btn btn-primary removeOption">Remove Rule</button></td>
          </tr>
          <tr>
            <td>
              <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
                <option value="0">Select Seller Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td>
              <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
                <option value="0">Select Purchaser Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
            <td><input type="text" class="form-control rate" name="rate[]" required=""></td>
            <td><button class="btn btn-primary removeOption">Remove Rule</button></td>
          </tr>
          <tr>
            <td>
              <select class="form-control select2 from" style="width:100%;" name="from[]" required="">
                <option value="0">Select Seller Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td>
              <select class="form-control select2 to" style="width:100%;" name="to[]" required="">
                <option value="0">Select Purchaser Firm</option>
                <option value="1">Nugen Feeds</option>
                <option value="4">Vasu &amp; Sons</option>
              </select>
            </td>
            <td><input type="number" class="form-control weight" name="weight[]" required=""></td>
            <td><input type="text" class="form-control rate" name="rate[]" required=""></td>
            <td><button class="btn btn-primary removeOption">Remove Rule</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

答案 1 :(得分：0)

感谢@Raeesh Alam

借助您的答案，我得到了答案。我将代码编辑为以下代码段。

$(document).on('change', '#FinancialDataTable td:nth-child(2n) select', function() {
  $(this).parent().parent().next().find('td:nth-child(2n+1) select').val($(this).val());
});
相关问题
最新问题