Javascript onchange 仅适用于 select 3 和 "all" 但不适用于两者之间

Question

不确定为什么会发生这种情况，但我的 javascript 更改显示的过去事件的数量无法正常工作。只有第一个 select 选项 (3) 和最后一个选项 (all) 似乎会触发 onchange 事件。请查看我的代码，如果我做错了什么请告诉我，我是 js 的 php 新人。另外，在我接受答案之前，我会将它放在我的演示站点上：http://aaron-schpitzer.ca/en/events

html(php)

echo '<tr><td><table class="invisible"><tr><td>Number Shown: <select id="select" onchange="changePast()"><option value="3">3</option><option value="10">10</option><option value="20">20</option><option value="'.count($pastEvents).'">All</option></select></td></tr></table></td></tr>';

js

<script>
var pastEvents = <?php echo json_encode($pastEvents); ?>;
function changePast(){
    var e = document.getElementById("select")
    var selected = e.options[e.selectedIndex].value;
    var table = document.getElementById("past_events");
    if(table!=null){
        var innerhtml = "";
        for(i=0;i<selected;i++){
            innerhtml+='<table class="invisible"><tr><td><img src="/'+pastEvents[i]["banner"]+'" alt="Event Banner"></td></tr><tr><td>'+pastEvents[i]["name"]+'</td></tr></table>';
        }
        table.innerHTML = innerhtml;
    }

}

Answer 1

我已经弄清楚了，过去只有 5 个测试事件，所以如果我 select 一个数字，我需要检查该值是否大于对象的数量，如果是，那么我需要使用 object.length。这是 for 循环之前添加的代码：

if(selected>pastEvents.length){
            selected = pastEvents.length;
}

Javascript onchange 仅适用于 select 3 和 "all" 但不适用于两者之间

Javascript onchange only works for select 3 and "all" but not inbetween

html

javascript

events

javascript-events