Enable and disable a specific option in the other dynamically added <select>-CodePudding

I have a table in which new rows are added using a button. In each row there is a select that uses jquery's select2 library. What I am trying to do is enable and disable the option that is selected. For example, if in a <select> option "A" is selected in the rest of the <select> that option must be disabled and if in the same <select> another option is selected, for example "B", in the rest of the <select> the option "A" must be enabled.

The problem is that it doesn't work as expected when adding new rows. But if it works correctly when having several <select> as in this case in the example I add 3.

Demo stackblitz: demo

Source code:

<html>
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css"
      rel="stylesheet"
    />
    <style>
      select {
        width: 100%;
      }
    </style>
  </head>

  <body>
    <h5>Enable and Disable option. It work</h5>
    <div style="width: 50%">
      <select >
        <option>Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option></select
      ><br /><br />
      <select >
        <option>Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option></select
      ><br /><br />
      <select >
        <option>Select</option>
        <option value="1">A</option>
        <option value="2">B</option>
        <option value="3">C</option>
        <option value="4">D</option>
        <option value="5">E</option>
      </select>
    </div>
    <br />
    <hr />
    <h5>Enable and Disable option. It not work</h5>
    <table id="tblDemo">
      <thead>
        <tr>
          <td>Description</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr id="row0">
          <td>
            <select >
              <option>Select</option>
            </select>
          </td>
          <td><input /></td>
          <td><button onclick="RemoveRow(0)">Remove</button></td>
        </tr>
      </tbody>
    </table>
    <br /><br />
    <button onclick="AddRow()">Add row</button>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <script>
      var arrayData;
      var counter = 1;
      $(document).ready(function () {
        LoadSelect();
        $('.demo').select2();
        $('.demo-ed').select2();
      });
      function LoadSelect() {
        arrayData = [
          { Id: 1, Description: 'A' },
          { Id: 2, Description: 'B' },
          { Id: 3, Description: 'C' },
          { Id: 4, Description: 'D' },
          { Id: 5, Description: 'E' },
        ];
        for (var i = 0; i < arrayData.length; i  ) {
          $('.demo').append(
            '<option value="'  
              arrayData[i].Id  
              '">'  
              arrayData[i].Description  
              '</option>'
          );
        }
      }
      function AddOption(x) {
        var n = x - 1;
        for (var i = 0; i < arrayData.length; i  ) {
          $('#row'   n   ' .demo').append(
            '<option value="'  
              arrayData[i].Id  
              '">'  
              arrayData[i].Description  
              '</option>'
          );
        }
        $('.demo').select2();
      }
      function AddRow() {
        $(
          '<tr id="row'  
            counter  
            '">'  
            '<td><select ><option>Select</option></select></td>'  
            '<td><input /></td>'  
            '<td><button onclick="RemoveRow('  
            counter  
            ');">Remove</button></td>'  
            '</tr>'
        ).appendTo('#tblDemo');
        counter  ;
        AddOption(counter);
        return false;
      }
      function RemoveRow(n) {
        if (counter > 1) {
          $('#row'   n).remove();
          counter--;
        }
        return false;
      }
      //class
      var demoSelect = '.demo-ed';
      //function enable/disable
      $(demoSelect).on('change', function (evt) {
        const selectedValue = [];
        $(demoSelect)
          .find(':selected')
          .filter(function (idx, el) {
            return $(el).attr('value');
          })
          .each(function (idx, el) {
            selectedValue.push($(el).attr('value'));
          });
        $(demoSelect)
          .find('option')
          .each(function (idx, option) {
            if (selectedValue.indexOf($(option).attr('value')) > -1) {
              if ($(option).is(':checked')) {
                return;
              } else {
                $(this).attr('disabled', true);
              }
            } else {
              $(this).attr('disabled', false);
            }
          });
      });
    </script>
  </body>
</html>

CodePudding user response：

Try this, I called the function that disables the option after you add a new row.

Demo

var arrayData;
var counter = 1;
$(document).ready(function() {
  LoadSelect();
  $('.demo').select2();
  $('.demo-ed').select2();
});

function LoadSelect() {
  arrayData = [{
      Id: 1,
      Description: 'A'
    },
    {
      Id: 2,
      Description: 'B'
    },
    {
      Id: 3,
      Description: 'C'
    },
    {
      Id: 4,
      Description: 'D'
    },
    {
      Id: 5,
      Description: 'E'
    },
  ];
  for (var i = 0; i < arrayData.length; i  ) {
    $('.demo').append(
      '<option value="'  
      arrayData[i].Id  
      '">'  
      arrayData[i].Description  
      '</option>'
    );
  }
}

function AddOption(x) {
  var n = x - 1;
  for (var i = 0; i < arrayData.length; i  ) {
    $('#row'   n   ' .demo').append(
      '<option value="'  
      arrayData[i].Id  
      '">'  
      arrayData[i].Description  
      '</option>'
    );
  }
  $('.demo').select2();
}

function AddRow() {
  $(
    '<tr id="row'  
    counter  
    '">'  
    '<td><select ><option>Select</option></select></td>'  
    '<td><input /></td>'  
    '<td><button onclick="RemoveRow('  
    counter  
    ');">Remove</button></td>'  
    '</tr>'
  ).appendTo('#tblDemo');
  counter  ;
  AddOption(counter);
  hideSelectOption()
  return false;
}

function RemoveRow(n) {
  if (counter > 1) {
    $('#row'   n).remove();
    counter--;
  }
  return false;
}
//class
var demoSelect = '.demo-ed';
//function enable/disable
$(demoSelect).on('change', function(evt) {
  hideSelectOption()
});

function hideSelectOption() {
  const selectedValue = [];
  $(demoSelect)
    .find(':selected')
    .filter(function(idx, el) {
      return $(el).attr('value');
    })
    .each(function(idx, el) {
      selectedValue.push($(el).attr('value'));
    });
  $('select')
    .find('option')
    .each(function(idx, option) {
      if (selectedValue.indexOf($(option).attr('value')) > -1) {
        if ($(option).is(':checked')) {
          return;
        } else {
          $(this).attr('disabled', true);
        }
      } else {
        $(this).attr('disabled', false);
      }
    });
}

<html>

<head>
  <meta charset="UTF-8" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
  <style>
    select {
      width: 100%;
    }
  </style>
</head>

<body>
  <h5>Enable and Disable option. It work</h5>
  <div style="width: 50%">
    <select >
      <option>Select</option>
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
      <option value="5">E</option>
    </select><br /><br />
    <select >
      <option>Select</option>
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
      <option value="5">E</option>
    </select><br /><br />
    <select >
      <option>Select</option>
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
      <option value="4">D</option>
      <option value="5">E</option>
    </select>
  </div>
  <br />
  <hr />
  <h5>Enable and Disable option. It not work</h5>
  <table id="tblDemo">
    <thead>
      <tr>
        <td>Description</td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      <tr id="row0">
        <td>
          <select >
            <option>Select</option>
          </select>
        </td>
        <td><input /></td>
        <td><button onclick="RemoveRow(0)">Remove</button></td>
      </tr>
    </tbody>
  </table>
  <br /><br />
  <button onclick="AddRow()">Add row</button>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

  <script>
  </script>
</body>

</html>