Javascript 重新加载页面后，onchange事件中未定义this.id_Javascript_Events_Cakephp_Cakephp 2.0

Javascript 重新加载页面后，onchange事件中未定义this.id

javascript events cakephp

Javascript 重新加载页面后，onchange事件中未定义this.id,javascript,events,cakephp,cakephp-2.0,Javascript,Events,Cakephp,Cakephp 2.0,我有以下问题：我有一个HTML元素下拉列表，带有onchange事件，它接受两个参数id和value。一切正常。只有一个例外。当我重新加载页面时，将触发此onchange事件，但id和值参数将未定义。如果没有这两个参数，此函数将无法执行任何操作我使用的是CakePHP，所以我是这样做的： 'size' => [ 'label' => 'Test label', 'type' => 'select', 'options' => [

我有以下问题：

我有一个HTML元素下拉列表，带有onchange事件，它接受两个参数id和value。一切正常。只有一个例外。当我重新加载页面时，将触发此onchange事件，但id和值参数将未定义。如果没有这两个参数，此函数将无法执行任何操作

我使用的是CakePHP，所以我是这样做的：

'size' => [
    'label'   => 'Test label',
    'type'    => 'select',
    'options' => [
        "1x1"         => 'Single',
        "2x1"         => 'Double'
    ],
    'help'    => 'Help text',
    'onchange' => 'change_viewport(this.id, this.value)'
]

function change_viewport(id, value) {
    console.log(id);
    console.log(value);
}

还有一个JS函数，它的开头如下：

'size' => [
    'label'   => 'Test label',
    'type'    => 'select',
    'options' => [
        "1x1"         => 'Single',
        "2x1"         => 'Double'
    ],
    'help'    => 'Help text',
    'onchange' => 'change_viewport(this.id, this.value)'
]

function change_viewport(id, value) {
    console.log(id);
    console.log(value);
}

有没有办法解决这个问题，让我得到正确的id和值

我知道我可以通过调用'setTimeout'和调用函数来解决这个问题，该函数将获得这个参数，但问题是，我可以有多个具有这个size元素的部分，我不知道哪一个是正确的

多谢各位

编辑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>

您能在定义onchange事件的地方添加HTML代码的代码片段吗？@SparkCountain我已经在我的问题中添加了HTML下拉列表。建议：将函数调用更改为change_ViewPort然后在函数调用中，更改为change_viewporte，其中“e”代表“element”。然后在函数中使用jQuery console.log$e.attr'id'进行测试，虽然它可能是prop而不是attr，但我永远不记得是哪个