Почему мои объекты html значений элементов не являются массивами и почему они не эквивалентны друг другу?

Question

Я пытаюсь проверить, соответствует ли значение начальному значению, но if в итоге возвращает false, и мой диалог сохранения не появляется.

Они заканчивают тем, что оба являются объектами, которые я делаю не хочу, я хочу сравнить оба как Массивы.

  var inital = document.getElementById("roleDropdown").getAttribute("data-inital")
  var inital = inital.split(",");
  $("#roleDropdown").change((e) => {

    var currentVal = $(e.currentTarget).val();

    console.log(inital)
    console.log(currentVal)
    console.log(typeof inital)
    console.log(typeof currentVal)
    console.log(inital == currentVal)

    if(inital === currentVal) {
        saveDialog.classList.remove("shown");
    } else {
        saveDialog.classList.add("shown");
    }
  });

Изображение

Answer 1

Если я правильно понимаю, что-то вроде этого должно работать:

  var dropdown = $('#roleDropdown');
  var initial = dropdown.data('initial');
  var initialValues = initial.split(',');
  dropdown.change(function(){

    var matches = true;
    var currentValues = $(this).val().split(',');
    // first, make sure the arrays are the same length, if not, they cant match
    if (initialValues.length !== currentValues.length) {
      matches = false;
    } else {
      // check if all the values in the inital array are still in the new array
      $.each(initialValues, function(i, value) {
        if ($.inArray(value, currentValues) === -1) {
          // mark this as not matching and stop checking here
          matches = false;
          return false;
        }
      });
    }
    var text = matches ? 'matches' : 'doesnt match';
    $('#saveDialog').text(text); 
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="roleDropdown" data-initial="three,two,one">
  <option>select one</option>
  <option value="one,two,three">one,two,three</option>
  <option value="one">one</option>
</select>

<div id="saveDialog">
  
</div>