Получить имя параметра вместо значения в Local Storage JavaScript при использовании виджета Select2

Question

Итак, у меня есть этот код для хранения выбора виджета Select2 в моем локальном хранилище:

// watch for changes to locations select
$('#locations').change(function() {
    var selected = []; // create an array to hold all currently selected locations

    // loop through each available location
    $('#locations option').each(function() {
        // if it's selected, add it to the array above
        if (this.selected) {
            selected.push(this.value);
        }
    });

    // store the array of selected options
    localStorage.setItem('locations', JSON.stringify(selected));
});

Проблема в том, что это мой HTML, сгенерированный Django:

<select name="preferred_location_test" id="locations" multiple="">
  <option value="7">The Netherlands</option>
  <option value="9">France</option>
</select>

Итак, в моем локальном хранилище я получаю «7» и «9», но я хочу, чтобы это был текст опции, поэтому «Нидерланды» или «Франция». Как я могу применить это к моему коду? Я не очень хорош с JavaScript. Я попробовал эти сообщения SO:

Получить выбранный текст опции с JavaScript

Получение текста выбранного в

Но они используют selectIndex, и я не уверен, как я могу использовать это в своем коде.

Может кто-нибудь помочь?

Answer 1

При работе с <select> в jquery вы используете $(this).value вместо this.value, чтобы получить содержимое атрибута value.

, чтобы получить фактический отображаемый текст, используйте `$ ( this) .text () вместо.

см. этот фрагмент

    $('#locations option').each(function() {
        // if it's selected, add it to the array above
        if (this.selected) {
            var location = $(this).text();
            selected.push(location);
        }
    });

Answer 2

let selected_values = [];
$("#locations").on('change', function() {
  $('#locations :selected').each(function(i, selected) {
    selected_values[i] = $(selected).text();
});
  alert(selected_values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="preferred_location_test" id="locations" multiple="">
  <option value="7">The Netherlands</option>
  <option value="9">France</option>
</select>

Поэтому, если вам нужен текст опции, вы можете просто использовать $("#test option:selected").html()

$("#test").on('change', function() {
  if ($(this).val() == '1') {
     alert($("#test option:selected").html());
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test">
  <option value="1">Test</option>
  <option value="2">1Test</option>
</select>