onchange 事件在页面加载开始时不起作用答案

【问题标题】：onchange event not working at begining of page loadingonchange 事件在页面加载开始时不起作用
【发布时间】：2018-08-23 18:12:56
【问题描述】：

我有一个 web 应用程序，它有一个 onchange 事件，用于将多个选择选项加载到由 ',' 分隔的文本框，并切片最后一个 ',' 它工作正常，我还有另一个填写表格的功能。当我尝试加载表单时，只有选择选项正在更新，期望 onchange 函数从选择中获取数据并在文本框中具有一些值。但遗憾的是它不起作用，但只有在选择或删除新选项并重新添加后才能工作

通过 onchange 事件向文本框添加多选数据的功能：

// arguments: reference to select list, callback function (optional)
function getSelectedOptions(sel,fn) {
    var opts = [], opt;
    // loop through options in select list
    for (var i=0, len=sel.options.length; i<len; i++) {
        opt = sel.options[i];
        // check if selected
        if ( opt.selected ) {
            // add to array of option elements to return from this function
            opts.push(opt);
            // invoke optional callback function if provided
            if (fn) {
              fn(opt);
            }}}
    // return array containing references to selected option elements
    return opts;
}

// example callback function (selected options passed one by one)
function callback(opt) {
    // display in textarea for this example
    var display = document.getElementById('display');
    display.innerHTML += opt.value + ',';
}

// anonymous function onchange for select list with id lstBox2
document.getElementById('sel1').onchange = function(e) {
    // get reference to display textareaa
    var display = document.getElementById('display');
    display.innerHTML = ''; // reset
    // callback fn handles selected options
    getSelectedOptions(this, callback);
    // remove ', ' at end of string
    var str = display.innerHTML.slice(0, -1);
    display.innerHTML = str;
};

表格填充功能：

$(document).ready(function () {
               tests = split[testIndex];
              // $('#display2').val(tests);
               var opt2 = '<option selected>' + tests + '</option>';
               $('#sel').append(opt2);})

【问题讨论】：

Onchange 在您更改绑定到的元素时起作用。你应该对 onload 做同样的事情
我尝试了同样的 onload 但它没有工作，同样尝试将它保存在 document.ready 但仍然存在问题
Onload iOS 与 document.ready 相同。纯js vs jquery
我试着让它准备好并且加载它没有工作！！！
那么，您能否提供一个minimal reproducible example (sn-p) 以便我们重现问题并尝试提供更好的帮助？

标签： javascript jquery html frontend

【解决方案1】：

尝试将您的 document.getElementById('sel1').onchange 代码移动到 $(document).ready(...) 块中。如果没有完整的页面示例，很难判断，但一种可能性是，当您尝试添加 onchange 处理程序时，“sel1”还不是 DOM 的一部分。

【讨论】：

【解决方案2】：

尝试使用

$('body').on('change', '#sel1', function(e) {

});

如果元素是在加载后添加的。

【讨论】：

我加了，没有区别，和以前一样。