Question

我动态创建下拉列表。

他们的ID是ddl1，ddl2，ddl3等等。

$('#ddl1').focus(function() {
    var previous = this.value;
}).change(function() {
    var index = $(this).find('selected').index();
    $('#ddl1').find('option:eq(' + index + ')').hide();
    $('#ddl2').find('option:eq(' + index + ')').hide();
});

$('#ddl2').focus(function() {
...

创建7个下拉列表使我能够编写7个change事件处理程序。

如何实现动态创建更改事件？

我的下拉附加方法是：

var x=1;
var dropdown=('#ddl1').html();
$('#btnadd').click(function() {    
   $('#divname').append('<select id="ddl'+x+' > </select> <option>../option>');
   x++;    
});

Answer 1

为每个下拉列表提供一个公共类并引用它。另外，使用.on()（事件委托）来捕获动态创建的元素：

$(document).on('change', '.common-class', function() {
   //Your function
   var currentId = $(this).attr('id');
});

<强>更新

每次追加select元素时添加相同的类：

//...
$('#divname').append('<select id="ddl'+ x + '" class="common-class"><option>../option></select>');

SELECTED OPTION

为了获得所选的选项：

$('#current-id').find('option:selected').index();

Answer 2

没有委派事件的Variant减少资源使用：

var $dds = $('select');

$dds.each(function(index) {
    var $this = $(this);
    processDdChange($this);
});

function processDdChange($obj) {
    $obj.on('change', function(e) {
        var $this = $(this);
        alert($this.attr('id') + ' | ' + $this.find(':selected').val());
});
}

https://jsfiddle.net/tasmanangel/2p9mbs7h/

如何动态创建“更改”事件处理程序？

2 个答案: