Question

我有两个下拉菜单，一个在动态表外部，另一个在表列内部。现在我的问题是如何将未选择的数据从一个下拉列表填充到另一个下拉列表。

例如，这意味着如果我从第一个下拉列表中选择一个值，则仅剩余的未选择值已复制到第二个下拉列表（在动态表格下拉列表中）。如果我单击添加行，则相同的第二个下拉数据将动态添加到行中。

我希望我的问题是可以理解的。

这是我的小提琴示例

$(document).ready(function() {
  var i = 1;
  $("#add_row").click(function() {
    $('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Second dropdown</option></select></td><td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter your text here' class='form-control input-md' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal' /> </td><td><input  name='cashdebt[" + i + "].name' type='text' placeholder='Amount 1' class='form-control input-md' id='cashdeb'data-action='sumDebit'></td><td><input  name='cashcredit[" + i + "].name' type='text' placeholder='Amount 2' data-action='sumCredit' class='form-control input-md' readonly></td>");
    // {/* <td>" + (i + 1) + "</td> */}
    $("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    // $('#cashacc_sel').append($('#dynamic_sel').html());
    i++;
  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
  });

});

<div class="form-group col-4" style="margin-bottom: 20px;">
  <label class="col-sm-12 control-label p-sm-0 input-group"> First Dropdown:</label>
  <select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
    <option value="">Choose an items</option>
    <option value="acc1">joe 1</option>
    <option value="acc2">joe 2</option>
    <option value="acc3">joe 3</option>
  </select>
</div>

<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <th class="text-center">
              Code
            </th>
            <th class="text-center">
              Name*
            </th>
            <th class="text-center">
              Text*
            </th>
            <th class="text-center">
              Initial amount*
            </th>
            <th class="text-center">
              First Payment
            </th>
          </tr>
        </thead>
        <tbody>
          <a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
          <tr id='addr0'>
            <td>
              <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter Code' class="form-control" />
            </td>
            <td>
              <select class="form-control" name="cashacc_sel" id="cashacc_sel">
                <option value="">Second dropdown</option>
              </select>
            </td>
            <td>
              <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your text here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
            </td>
            <td>
              <input type="number" id="cashdeb" name='cashdebt' placeholder='Amount 1' data-action="sumDebit" class="form-control" />
            </td>
            <td>
              <input type="number" id="cashcredit" name='cashcredit' placeholder='Amount 2' data-action="sumCredit" class="form-control" readonly />
            </td>
          </tr>
          <tr id='addr1'></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

请检查此链接Clik for more details

HTML代码

<div class="form-group col-4" style="margin-bottom: 20px;">   <label class="col-sm-12 control-label p-sm-0 input-group"> First Dropdown:</label>   <select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
    <option value="">Choose an items</option>
    <option value="acc1">joe 1</option>
    <option value="acc2">joe 2</option>
    <option value="acc3">joe 3</option>   </select> </div>

<div class="container">   <div class="row clearfix">
    <div class="col-md-12 column">
      <table class="table table-bordered table-hover" id="tab_logic">
        <thead>
          <tr style="background-color: #680779; color: #fff;">
            <th class="text-center">
              Code
            </th>
            <th class="text-center">
              Name*
            </th>
            <th class="text-center">
              Text*
            </th>
            <th class="text-center">
              Initial amount*
            </th>
            <th class="text-center">
              First Payment
            </th>
          </tr>
        </thead>
        <tbody>
          <a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
          <tr id='addr0'>
            <td>
              <input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter Code' class="form-control" />
            </td>
            <td>
              <select class="form-control" name="cashacc_sel" id="cashacc_sel">
                <option value="">Second dropdown</option>
              </select>
            </td>
            <td>
              <input type="text" class="form-control" id="acc_narrat" placeholder="Enter your text here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
            </td>
            <td>
              <input type="number" id="cashdeb" name='cashdebt' placeholder='Amount 1' data-action="sumDebit" class="form-control" />
            </td>
            <td>
              <input type="number" id="cashcredit" name='cashcredit' placeholder='Amount 2' data-action="sumCredit" class="form-control" readonly />
            </td>
          </tr>
          <tr id='addr1'></tr>
        </tbody>
      </table>
    </div>   </div> </div>

jQuery代码

 $(document).ready(function() {
 $("#cashacc_sel").html($('#cashacc').html());
  var i = 1;
  $("#add_row").click(function() {
  var oSelectedValue = $('#cashacc').val();
    $('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Second dropdown</option></select></td><td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter your text here' class='form-control input-md' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal' /> </td><td><input  name='cashdebt[" + i + "].name' type='text' placeholder='Amount 1' class='form-control input-md' id='cashdeb'data-action='sumDebit'></td><td><input  name='cashcredit[" + i + "].name' type='text' placeholder='Amount 2' data-action='sumCredit' class='form-control input-md' readonly></td>");
    // {/* <td>" + (i + 1) + "</td> */}
    $("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
    // $('#cashacc_sel').append($('#dynamic_sel').html());
     $("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
     $("#cashacc").html($('#cashacc_sel').html());
      $("#cashacc").val(oSelectedValue);
    i++;

  });
  $("#delete_row").click(function() {
    if (i > 1) {
      $("#addr" + (i - 1)).html('');
      i--;
    }
  });

});

如何将下拉数据从一个下拉列表填充到另一个下拉列表？

1 个答案: