Question posted in
You can find the official documentation here.

set value of next dropdown on changing previous dropdown – Jquery ajax

When I select any even dropdown, then value of next dropdown will be same as I selected for previous dropdown. For example, when I change 2nd dropdown, the value of 3rd dropdown will be same as 2nd dropdown

$('#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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to @Raeesh Alam

    I got my answer with the help of your answer. I edited my code to following snippet.

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

  2. 0

    Check below snippet I hope this will help you lot.

    // 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search