javascript - 使用 Select2 小部件时检索选项名称而不是本地存储 JavaScript 中的值

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));
});

问题是这是我由 Django 生成的 HTML:

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

所以我的本地存储得到“7”和“9”，但我希望这是选项文本，所以“荷兰”或“法国”。我如何将其应用到我的代码中？我不太擅长 JavaScript。我尝试过这些帖子:

Get selected option text with JavaScript

Retrieving the text of the selected <option> in <select> element

但是他们使用 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);
        }
    });