skip to Main Content

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>

2

Answers


  1. Chosen as BEST ANSWER

    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. 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