使用jquery从下拉列表中选择值时如何分配值和禁用框

Question

我想对下拉列表进行验证。我从数据库中获取的下拉列表，我将选项值设置为 GUID，因为稍后我想保存到数据库中。如何为客户端中的每个选定值分配条目类型并禁用该框？
例如： 当我选择账户 1 时，贷方文本框将被禁用，只允许用户在借方文本框中输入。 当我选择账户 2 时，借方文本框将被禁用，只允许用户在贷方文本框中输入。

Result that I want
 Account |   Debit  | Credit |
Account 1|   input  | disable| //entry type in db is 10, so user allow input in debit and disable credit
Account 2|  disable |  input | //entry type in db is 20, so user allow input in credit and disable debit
Account 3|  input   | disable|
Account 4|  disable |  input |
Account 5|  input   | disable|

My database column, entry type 10 = debit, 20 = credit
                Guid                | Account  | Entry Type |
19B267DD-FB65-4CD7-AF72-24B3213062B0| Account 1|     10     |
C4A96735-3FE2-447E-9B28-74937B98AC60| Account 2|     20     |
9F55079D-1A55-47C9-81D3-971C60FA790A| Account 3|     10     |
9902E1F6-D6A6-4755-B77D-AE639499536C| Account 4|     20     |
454F9B88-10F9-4179-A830-46C098B689F9| Account 5|     10     |

$('#addrow').click(function() {
  addRow();
});


$(document).on('click', '.delete-row', function() {
  $(this).parents('.acc-row').remove();
});

$(document).on('keyup', '.row-dr, .row-cr', function(e) {
  var dr = 0;
  cr = 0;
  total_cr = 0,
    total_dr = 0;
  var $row = $(this).closest("tr");
  $(".acc-row").each(function() {
    total_dr += $(this).find(".row-dr").val() != "" ? parseFloat($(this).find(".row-dr").val()) : 0
    total_cr += $(this).find(".row-cr").val() != "" ? parseFloat($(this).find(".row-cr").val()) : 0
  })
  $("#debit").val(total_dr.toFixed(2))
  $("#credit").val(total_cr.toFixed(2))

});

function addRow() {
  var addRows =
    '<tr class="acc-row">' +
    '<td><a class="delete-row" href="javascript:; ">Delete</i></a></td>' +
    '<td><select class="form-control select2" id="ddlAccount"><option label>Account</option><option value="19B267DD-FB65-4CD7-AF72-24B3213062B0">Account 1</option><option value="C4A96735-3FE2-447E-9B28-74937B98AC60">Account 2</option><option value="9F55079D-1A55-47C9-81D3-971C60FA790A">Account 3</option><option value="9902E1F6-D6A6-4755-B77D-AE639499536C">Account 4</option><option value="454F9B88-10F9-4179-A830-46C098B689F9">Account 5</option></select></td>' +
    '<td><input class="form-control tx-right row-dr" type="text"></td>' +
    '<td><input class="form-control tx-right row-cr" type="text"></td>' +
    '</tr>'
  $(".acc_table").append(addRows);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example-input" class="table table-bordered text-nowrap">
  <thead>
    <tr>
      <th class="wd-5p"></th>
      <th class=" wd-20p"> </th>
      <th class="wd-10p tx-right">Debit</th>
      <th class="wd-10p tx-right">Credit</th>
    </tr>
  </thead>
  <tbody class="acc_table">
    <tr class="acc-row">
      <td>
        <a id="delete" href="javascript:;" title="Remove row">Delete</i></a></td>
      <td>
        <select class='form-control select2' id="ddlAccount">
          <option label>Account</option>
          <option value="19B267DD-FB65-4CD7-AF72-24B3213062B0">Account 1</option>
          <option value="C4A96735-3FE2-447E-9B28-74937B98AC60">Account 2</option>
          <option value="9F55079D-1A55-47C9-81D3-971C60FA790A">Account 3</option>
          <option value="9902E1F6-D6A6-4755-B77D-AE639499536C">Account 4</option>
          <option value="454F9B88-10F9-4179-A830-46C098B689F9">Account 5</option>
        </select>
      </td>
      <td>
        <input class="form-control tx-right row-dr" type="text" value=""></td>
      <td>
        <input class="form-control tx-right row-cr" type="text" value=""></td>
    </tr>
  </tbody>
  <tfoot>
    <tr id="hiderow">
      <td colspan="6" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"><i class="fe fe-plus-circle"></i>Add a Row</a></b></td>
      <br>
    </tr>
    <tr>
      <td class="valign-middle"></td>
      <td class="tx-right">Total</td>
      <td class="tx-right">
        <input class="form-control tx-right" type="text" placeholder="0.00" id="debit" disabled></td>
      <td class="tx-right">
        <input class="form-control tx-right" type="text" placeholder="0.00" id="credit" disabled></td>
    </tr>
  </tfoot>
</table>

<button id="btnAddAccount" type="button">Count </button>

Answer 1

• 从您的数据库中获取所有信息并将它们转换为 javascript 对象数组。
  
• 按选项填写选择。
  
• 为选择更改创建侦听器，找到包含更多信息的选定选项并禁用输入。

// find elements
const selectOptions = [
  {
    id: '19B267DD-FB65-4CD7-AF72-24B3213062B0',
    account: 'Account 1',
    entryType: 10
  },
  {
    id: 'C4A96735-3FE2-447E-9B28-74937B98AC60',
    account: 'Account 2',
    entryType: 20
  },
  {
    id: '9F55079D-1A55-47C9-81D3-971C60FA790A',
    account: 'Account 3',
    entryType: 10
  }
];

// fill all select options
for(let i=0; i<selectOptions.length; i++)
  $('select').append(`<option value="${selectOptions[i].id}">${selectOptions[i].account}</option>`);

// create listener for select change
$('select').change(function(e) {
  const id = $(this).val(); // get selected id
  const foundObjInOption = selectOptions.find(v => v.id === id); // find object in js object array by selected id
  
  // disable input
  if(foundObjInOption !== undefined) {
      // row explain: get current -> find closest TR in DOM tree -> find element by name -> set values/props
      $(this).closest('tr').find('[name="credit"]').prop('disabled', foundObjInOption.entryType === 10).val(null);
      $(this).closest('tr').find('[name="debit"]').prop('disabled', foundObjInOption.entryType === 20).val(null);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class='form-control select2' id="ddlAccount">
        <option value="">Select account...</option>
      </select>
    </td>
    <td>
      <input class="form-control tx-right row-dr" type="text" value="" name="debit">
    </td>
    <td>
      <input class="form-control tx-right row-dr" type="text" value="" name="credit">
    </td>
  </tr>
</table>