在jQuery中添加新行时禁用其他选择框的选定选项答案

【问题标题】：Disabled selected option for others select box when new row added in jQuery在jQuery中添加新行时禁用其他选择框的选定选项
【发布时间】：2016-09-18 07:05:05
【问题描述】：

我是 jQuery 新手，请帮助我解决以下问题。

我有带有动态行的动态选择框，我想对这些选择框进行编码，就像在选择框中选择一个选项时一样，默认情况下这应该在所有其他选择框中禁用，但是我在更改选择时这样做了框，但是当我添加新行时，为新创建的选择框启用了相同的选项。

HTML：

$(document).ready(function() {
      GetDeonmination('Denomination');
    }

    function GetDeonmination(ddlId) {
      $.getJSON("@Url.Action("
        GetCash ")", function(data) {
          var $select = $('#' + ddlId); //$('#down');
          $.each(data, function(key, value) {
            $('<option>').val(value.CashID).text(value.Denominatin).appendTo($select);
          });
        });
    }

    $('.addNewCash').on('click', function() {
      i = rowCounts = $('#tbody tr').length;
      addRow(i);
    });

    function addRow(i) {
      var tr = '<tr class="dataCash">' +
        '<td style="text-align:center">' +
        '<select name="Denomination" class="Denomination" onchange="Calculate(\'Count' + (i) + '\', \'Denomination' + (i) + '\', \'Total' + (i) + '\');" id="Denomination' + (i) + '">' +
        '<option>--Select--</option>' +
        '</select>' +
        '</td>' +

        '<td style="text-align:center"><input type="text" name="Count" id="Count' + (i) + '" class="Count" onkeyup="Calculate(\'Count' + (i) + '\', \'Denomination' + (i) + '\', \'Total' + (i) + '\');" /></td>' +
        '<td style="text-align:center"><input type="text" name="Total" class="Total" id="Total' + i + '" class="Total" /></td>' +
        '<td style="vertical-align: middle; text-align:center"><a href="#" class="removeCash"><i class="glyphicon glyphicon-remove" style="text-align:center"></i></a></td>' +
        '</tr>';
      $('#tbody').append(tr);
      GetDeonmination("Denomination" + i);

    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel='stylesheet' type='text/css' />


<table class="table table-hover table-bordered table-responsive" id="CashTable">
  <thead>
    <tr>
      <td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Denomination</td>
      <td style="background-color: #6600CC; font-weight:bold; color: #FFFFFF; text-align: center;">Count</td>
      <td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;">Total</td>
      <td style="background-color: #6600CC; font-weight: bold; color: white; text-align: center;">
        <a href="#" class="addNewCash"><i class="glyphicon glyphicon-plus"></i></a>
      </td>
    </tr>
  </thead>
  <tbody id="tbody" class="tbody">
    <tr class="dataCash">
      <td style="text-align:center">
        <select name="Denomination" class="Denomination" id="Denomination" onchange="Calculate('Count', 'Denomination', 'Total')">
          <option>--Select--</option>
        </select>
      </td>
      <td style="text-align:center">
        <input type="text" name="Count" onkeyup="Calculate('Count', 'Denomination', 'Total');" class="Count" id="Count" />
      </td>
      <td style="text-align:center">
        <input type="text" name="Total" class="Total" id="Total" readonly />
      </td>
      <td style="vertical-align: middle; text-align:center">

      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

"Uncaught SyntaxError: missing ) after argument list" in code sn-p.
Mr Jeroen Heier 语法错误即将到来，因为当单击添加行时，它会向服务器发送请求以获取选择框的数据，请查看代码 thnx

标签： javascript jquery css html

【解决方案1】：

您可以在调用 onchange 事件并禁用选择框时设置一个标志。当您追加新行时，您可以为新创建的选择下拉菜单设置“disabled=true”。

【讨论】：