javascript - 对动态加载的 DOM 行为感到困惑 select = undefined

Question

下面的代码非常适合动态加载选择下拉列表。该代码在文档准备函数中被调用，以将数据预加载到页面中。该代码工作得很好。然而，我对它在 DOM 中似乎“未定义”这一事实感到困惑。即..更改事件等...当我尝试选择一个值时...

在 HTML 中，设置很简单:

<select id="optionsChaa" name="chaa_id" class="largewidth"></select>

jquery代码如下。有用。请随意在您的代码中使用它

var optionsValues = '<select id="optionsChaa" name="chaa_id" class="largewidth">';
                optionsValues += '<option value=""></option>';
                $.each(result, function() {
                    optionsValues += '<option value="' + this.chaa_id.val + '">' + this.chaa_name + '</option>';
                });
                optionsValues += '</select>';

                var options = $('#optionsChaa');
                options.replaceWith(optionsValues);

                $('#optionsChaa').change(function() {

                   // Alert returns undefined...

                    alert($(this).val() );

                });

那么为什么 DOM 之后是“未定义”的呢？

Answer 1

我认为 this.chaa_id.val 部分有问题。在 each 中，“this”指的是“当前”元素(即 results 数组的成员)。