我有以下问题:
我有一个 HTML 元素(下拉菜单)，带有 onchange 事件，它接受两个参数(id 和 value)。一切正常。除了一种情况。当我重新加载页面时，将触发此 onchange 事件，但 id 和 value 参数将未定义。如果没有这两个参数，该函数将不会执行任何操作。
我正在使用 CakePHP，所以我这样做:
'size' => [
'label' => 'Test label',
'type' => 'select',
'options' => [
"1x1" => 'Single',
"2x1" => 'Double'
],
'help' => 'Help text',
'onchange' => 'change_viewport(this.id, this.value)'
]
和一个像这样开始的 JS 函数:
function change_viewport(id, value) {
console.log(id);
console.log(value);
}
有什么想法可以解决这个问题，以便我获得正确的 ID 和值吗？
我知道我可以通过调用“setTimeout()”并调用将获取此参数的函数来解决此问题，但问题是，我可以有多个具有此大小元素的部分，而且我不知道哪一个是正确。
谢谢
编辑1:下拉元素的HTML
这是 CakePHP 针对上述大小定义的输出
<select name="data[PromotionActionInjectionBanner][0][size]" onchange="change_viewport(this.id, this.value)" class="PromotionActionInjectionBanner_size chzn-chosen span8 chzn-done" data-placeholder="Select an option" repeatit=" PromotionActionInjectionBanner_size PromotionActionInjectionBanner size 0 secondary" markedoptions="" id="PromotionActionInjectionBanner0Size" idtemplate="PromotionActionInjectionBanner0Size" nametemplate="data%5BPromotionActionInjectionBanner%5D%5B0%5D%5Bsize%5D" style="display: none;">
<option value="1x1" selected="selected">Single</option>
<option value="2x1">Double</option>
</select>
最佳答案
更改如下:
'size' => [
'label' => 'Test label',
'type' => 'select',
'options' => [
"1x1" => 'Single',
"2x1" => 'Double'
],
'help' => 'Help text',
'onchange' => 'change_viewport(this)'
]
并将 JS 函数更改为:
function change_viewport(e) {
console.log(e.id);
console.log(e.value);
}
应该可以正常工作。我测试了以下代码片段，你可以在线运行来检查:
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("em").addClass("selected");
$("#myid").addClass("highlight");
});
function clicks(e){
alert(e.id);alert(e.value);
}
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
<select id ="id_name " onchange="clicks(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>
关于javascript - 页面重新加载后，this.id 在 onchange 事件中未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59195293/