在 'change' 和 jQuery 之后将 'selected' 属性添加到用户选择的选项

Question

我有一个 select 元素，我正在添加选项以动态使用来自名为 'results':

的变量的数据

HTML:

<select id="categories">
    <option selected disabled>Select your category</option>
</select>

jQuery:

$.each(results.Subcategories, function(index,category) {
    var category = '<option value="'+category.Name+'" data-index="'+index+'">'+category.Name+'</option>';
    $('#categories').append(category);
});

这工作正常，我可以在 select 元素中动态添加的选项之间进行选择。

我现在需要做的是在用户从添加的选项中选择它之后获取当前 selected 的 'value' 属性。这就是我卡住的地方。我认为这样的事情会奏效：

$('#categories').on('change', function() {
    var optionSelected = $("#categories option:selected", this);
    console.log($(optionSelected).data("value"))
});

但是当我选择一个新的时，selected 属性不会在选项上移动，所以我无法定位该属性来获取值。

假设上面的方法是可靠的，我如何让我的新 selected 选项具有 selected 属性，以便我可以定位它并获取值？还是我缺少更好的方法？提前致谢。

Answer 1

选定的属性将从 select 加载一个选项。您需要的是 this.val() 或者您可以使用纯 javascript 并使用 getElementById（您的选项元素的 id）.value() 并以这种方式获取值。

在 'change' 和 jQuery 之后将 'selected' 属性添加到用户选择的选项

Adding 'selected' attribute to user's selected option after 'change' with jQuery

jquery

attributes

html-select