JQuery .change() 如何获取值

Question

我正在使用JQuery实现动态下拉选择器。一般来说，我是前端的新手。我正在努力访问使用 JQuery 时下拉列表已更改为的值。

用户旅程是 (1( 选择一个"集合"，然后 (2( 从该集合中选择一个"单位"。

我在 HTML 中实现了"集合"下拉 onchange 属性，如下所示：

<select name="collection" id="collection" onchange="collectionChanged(this.value)">

使用此方法，collectionChanged 函数获取所选下拉列表已更改为的值。然后，我尝试用JQuery实现"单元"的更改行为。但是我得到一个没有值属性或任何看起来可比的对象。我查看了JQuery网站和W3CSchools的文档。在这两种情况下，他们使用的函数都不带任何参数，所以我没有什么可比较的。我错过了什么？

function getOrCreateUnitSelect() {
let unitSelect;
if ( ! unitSelectExists() ) {
unitSelect = $('<select />', {"id": "unit-select"});
// This is where I add the 'on change' function
unitSelect.change(unitChanged);
unitSelect.insertAfter($('#collection'));
}
else {
unitSelect = $('#unit-select');
}
return unitSelect;
}
function unitSelectExists() {
return $('#unit-select').length;
}
function collectionChanged(value) {
let processFilterResponse = function(serverResponseData, textStatusIgnored, jqXHRIgnored) {
let serverDataObject = JSON.parse(serverResponseData);
let unitSelect = getOrCreateUnitSelect();
serverDataObject['content']['units'].forEach(
function(unit){
$(
"<option />",
{value: unit, text: unit}
).appendTo($("#unit-select"));
}
);
}
let config = {
type: "GET",
url: filterUrl,
data: {'collection': value},
dataType: 'html',
success: processFilterResponse
}
$.ajax(config);
}

function unitChanged(e) {
console.log("unit has been changed");
// Here I get some object that doesn't have a 'value' attribute
console.log(e);
}

Answer 1

当.change调用处理程序时，this关键字是对传递事件的元素的引用，因此在unitChanged(e)中您可以只执行console.log(this.value)。

注意：.change(handler)只是.on("change", handler)的简写