ListBox

  • 如何利用JQuery实现两个ListBox子项之间的互相调整?

    解析:,,这个需求可以通过jQuery来实现。需要创建两个ListBox(列表框),然后通过jQuery的事件处理和DOM操作,实现在选择一个ListBox的项后,该项会在另一个ListBox中被移除。,,代码如下:,,“html,,,,,,$(document).ready(function(){, $(“#listbox1 option”).each(function(){, if ($(this).val() != “”) {, $(this).data(“oldindex”, $(this).index());, }, });, $(“#moveRight”).click(function(){, var options = $(“#listbox1 option:selected”);, options.each(function(){, var $this = $(this);, var oldIndex = $this.data(“oldindex”);, var newIndex = $this.index();, $(“#listbox2”).append(options.remove().sort(function(a,b){, return ( $(a).data(“oldindex”) ˃ $(b).data(“oldindex”) ) ? 1 : 1;, }));, });, });, $(“#moveLeft”).click(function(){, var options = $(“#listbox2 option:selected”);, options.each(function(){, var $this = $(this);, var oldIndex = $this.data(“oldindex”);, var newIndex = $this.index();, $(“#listbox1”).prepend(options.remove().sort(function(a,b){, return ( $(a).data(“oldindex”) ˃ $(b).data(“oldindex”) ) ? 1 : 1;, }));, });, });,});,,,,,Option 1,Option 2,Option 3,Option 4,,Move Right,Move Left,,,,,“,,这段代码会创建一个有两个ListBox和一个按钮的页面。当点击”Move Right”按钮时,选中的项将从左侧的ListBox移动到右侧的ListBox;当点击”Move Left”按钮时,选中的项将从右侧的ListBox移动到左侧的ListBox。

    2024-09-04
    015
云产品限时秒杀。精选云产品高防服务器,20M大带宽限量抢购  >>点击进入