title: Pre-pop second dropdown with matched array values from first dropdown
body: <p>I have 2 <code>selects</code> which the first one is pre-populated from my <code>datatable</code> column values on button click from the row.</p>
  
  <p>I need to now pre-pop the second <code>select</code> with the available values that match the selected first option but struggling.</p>
  
  <p><strong>All JQuery code</strong></p>
  
  <pre><code>// Table row 'Modify' button click from 'Existing Content' table
  $('#selectedDialPlanDataTable').on('click', 'button[name="modifyContentButton"]', function () {  
      // Populates 'Option' dropdown
      let selectedData = selectedDialPlanDataTable.data();
  
      for (var i = 0; i &lt; selectedData.length; i++) {
          var selectedDataOption = selectedData[i].option;
  
          if (selectedDataOption == 'start') {
              selectedDataOption = 's';
          }
          //console.log(selectedData)
          $('#modDelOptDropDown').append('&lt;option value="' + selectedDataOption + '"&gt;' + selectedData[i].option + '&lt;/option&gt;');
      }
  
      // Removes duplicates from 'Option' dropdown
      var selectedOption = {};
      $('#modDelOptDropDown &gt; option').each(function () {
          if (selectedOption[this.text]) {
              $(this).remove();
          } else {
              selectedOption[this.text] = this.value;
          }
      });
  })
  
  // Load 'Existing Dial Plan Content' datatable
  function selectedDialPlanButtonClick() {
      selectedDialPlanDataTable = $('#selectedDialPlanDataTable')
          .DataTable({
              "ordering": false,
              "searching": false,
              "paging": false,
              "info": false,
              'ajax': {
                  "type": 'GET',
                  "url": '../_IncomingCallCode/jsons/existingDataPlanData.json',
                  "data": function (data) {
                      return data;
                  },
                  "error": function () {
                      $('#selectedDialPlanDataTable_wrapper').hide();
                      $('#existingRuleLoadErrorMessage').html(
                          '&lt;p&gt;There was an issue retrieving the existing content for &lt;b&gt;' + telNumberSelected + '&lt;/b&gt;. Please try again.&lt;/p&gt;'
                          + '&lt;p&gt;If the error keeps occurring, please get in touch.&lt;/p&gt;').addClass('text-danger');
                  }
              },
              "columns": [
                  { "data": "option" },
                  { "data": "priority" },
                  { "data": "dialPlanFeature" },
                  { "data": "appdata" }
              ],
              "destroy": true
          });
  }
  </code></pre>
  
  <p><strong>Screenshot</strong>
  <a href="https://i.stack.imgur.com/ETZ8t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ETZ8t.png" alt="enter image description here"></a></p>
  
  <p><strong>Pencil button clicked</strong>
  <a href="https://i.stack.imgur.com/eXNfH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eXNfH.png" alt="enter image description here"></a></p>
  
  <p><strong>Expanded pre-pop 'Select' Select from code provide</strong></p>
  
  <p><a href="https://i.stack.imgur.com/4S6xs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4S6xs.png" alt="enter image description here"></a></p>
  
  <p>Basically i need if the 'Edit' button was clicked for '2' then the priority <code>select</code> should pre-pop with <code>option</code>s 1-5</p>
  
  <p>I have this working <code>onchange</code> with the following code just struggling with when the initial <code>button</code> is clicked</p>
  
  <p><strong>Change code</strong></p>
  
  <pre><code>// Pre-pop's 'Prioriy when 'Modify' button is clicked then the 'Option' dropdown changed
  $('#modDelOptDropDown').on('change', function () {
      $('#priorityDropdown').children('option').remove();
  
      let tableData = selectedDialPlanDataTable.data().toArray();
      //console.log(tableData)
      tableData = tableData.filter(({ option, priority }) =&gt; (priority == $('#priorityDropdown').val() || !$('#priorityDropdown').val() || !$(this).val()) &amp;&amp;
          (option == $('#modDelOptDropDown').val() || !$('#modDelOptDropDown').val() || !$(this).val()));
  
      //console.log(tableData)
  
      for (var i = 0; i &lt; tableData.length; i++) {
          //console.log(tableData[i].priority)
          $('#priorityDropdown').append('&lt;option value="' + tableData[i].priority + '"&gt;' + tableData[i].priority + '&lt;/option&gt;');
      }
  });
  </code></pre>
  
  <p><strong>Array details</strong></p>
  
  <p><a href="https://i.stack.imgur.com/cBHr3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cBHr3.png" alt="enter image description here"></a></p>