如何使用多个修改后的select2选择框？
我有一个jquery代码，即使用我的select2标签。 它运作良好：
$('select').select2({ placeholder: 'Select a month' }); $("select").on("select2:select", function(evt) { var element = evt.params.data.element; var $element = $(element); window.setTimeout(function() { if ($("select").find(":selected").length > 1) { var $second = $("select").find(":selected").eq(-2); $element.detach(); $second.after($element); } else { $element.detach(); $("select").prepend($element); } $("select").trigger("change"); }, 1); }); $("select").on("select2:unselect", function(evt) { if ($("select").find(":selected").length) { var element = evt.params.data.element; var $element = $(element); $ ("select").find(":selected").after($element); } }); January February March April May June July August September October November December
但我有问题，当我使用多个选择框时，我的代码不再正常工作：
$('select').select2({ placeholder: 'Select a month' }); $("select").on("select2:select", function(evt) { var element = evt.params.data.element; var $element = $(element); window.setTimeout(function() { if ($("select").find(":selected").length > 1) { var $second = $("select").find(":selected").eq(-2); $element.detach(); $second.after($element); } else { $element.detach(); $("select").prepend($element); } $("select").trigger("change"); }, 1); }); $("select").on("select2:unselect", function(evt) { if ($("select").find(":selected").length) { var element = evt.params.data.element; var $element = $(element); $ ("select").find(":selected").after($element); } });
January February March April May June July August September October November December January February March April May June July August September October November December January February March April May June July August September October November December
这意味着它仅适用于最后一个选择框。
问题是您正在使用$("select")返回所有 select标记，而不是您想要的。 您希望在每个select处理程序上，处理程序将仅为触发此事件的select运行。
看看我是如何修理它的..
$('select').select2({ placeholder: 'Select a month' }); $("select").on("select2:select", function(evt) { var $select = $(this); var element = evt.params.data.element; var $element = $(element); window.setTimeout(function() { if ($select.find(":selected").length > 1) { var $second = $select.find(":selected").eq(-2); $select.detach(); $second.after($element); } else { $select.detach(); $element.prepend($element); } $select.trigger("change"); }, 1); }); $("select").on("select2:unselect", function(evt) { if ($("select").find(":selected").length) { var $select = $(this); var element = evt.params.data.element; var $element = $(element); $select.find(":selected").after($element); } });
您只需要对选择进行ID，并使用select2插件对其进行初始化。 此外，我使用默认function简化了您的代码。
$("select#sel1").select2({ multiple : true, placeholder : 'Select a month', }); $("select#sel2").select2({ multiple : true, placeholder : 'Select a month', });