显示下拉菜单时填充下拉列表？

Question

首先，我想说我对jQuery非常陌生，昨天刚刚开始，所以我对某些逻辑有些模糊，如果我不使用最佳实践，请毫不犹豫地纠正我。

基本上就是我想要做的是：

• 我有几个按钮
• 当我点击该按钮中的一个，我会打开一个包含几个元素一个div网页（即不同根据按下的按钮），在一些案件有，我想，当它的加载

我能正确处理按钮和DIV装载用Ajax来填充下拉列表

，但是我的下拉列表有点麻烦。我想在文档中加载下拉列表时执行ajax调用，但我无法弄清楚如何做到这一点。

当我点击按钮，一个是创建HTML的一点点：

<div class='content'> 
    <select class='dropdown'></select> 
</div> 

这只是添加到文档之后，我点击了一个按钮，它不存在摆在首位（基本上因为不同的按钮，将载入的内容DIV不同的东西）

我第一次在我的JS尝试：

$('select.dropdown').load(function() { 
    alert('dropdown loaded'); 
}); 

这没有工作，在所有的内华达州戒备呃出现了，无论我把这个小小的JS放在哪里（我试图在创建html之前先把它选中，我试着把它放在后面，不管我从来没有得到警报）

所以我尝试了ready函数：

$('select.dropdown').ready(function() { 
    alert('dropdown loaded'); 
}); 

而且工作。我用一个.post（）替换了警报，看起来像这样：

$('select.dropdown').ready(function() { 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $('select.dropdown').append("html stuff with <option>"); 
    }); 
    }, 'json'); 

而且运行良好。但事实是，现在我要填充只解雇了。就绪（）事件选择标签，所以我试着用$（本）：

$('select.dropdown').ready(function() { 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $(this).append("html stuff with <option>"); 
    }); 
    }, 'json'); 

并没有奏效。如果我尝试添加警报以查看“this”引用的内容：

$('select.dropdown').ready(function() { 
    alert($(this).attr('class')); 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $(this).append("html stuff with <option>"); 
    }); 
    }, 'json'); 

我得到“undefined”。

所以基本上我的问题是：

• 为什么。就绪（）的作品，而不是.load（）？
• 如何在.ready（）函数中使用$（this）来引用启动ready事件的下拉列表？

我想用$（本），而不是第一个解决方案的原因是因为我会动态地添加其他下拉列表中，将使用相同的HTML标记和相同的JS代码（如果可能的话），所以我有区分哪个下拉菜单启动了准备好的事件。

有关如何做到这一点的任何想法/建议？

Answer 1

如果你不能在创建附加选项，另一个海报建议那么也许你可以使用自定义事件：

$('#mybuttonid').click(function(){ 
    //load whatever here 
    $('select.dropdown').trigger('dropReady');//change selector to get right one 
}); 
$(document).on('dropReady','select.dropdown',function(){ 
    //do what you need 
}); 

注意尝试使用的包装，而不是记录为主播事件。

Answer 2

是否有任何特殊原因在绘画之前无法填充下拉菜单？以这种方式链接事件会容易得多。这将是最简单的选择。

如果不成功，您可以在append或appendTo事件上使用.each回调函数在将下拉列表添加到DOM后填充下拉列表。您没有提供该代码片段，所以我对此进行了一些假设。

例子：

var content = $("<div class='content'>").appendTo(body); 

$("<select class='dropdown'></select>") 
.appendTo(content).each(function() { 
    $.post("url.php", {arg: 'arg'}, function(data) { 
    $.each(data, function() { 
     $(this).append("<option>"); 
    }); 
    }); 
});