2014-12-05 153 views
0

如果您已经在此工作了一段时间并且需要帮助,目前,我有2个列表,其中包含内容。我希望能够从一个列表中选择内容并将其移入第二个列表。为此,我希望能够选择一个或多个内容,然后单击移动内容的按钮。我无法获得实际的移动功能。我的代码来自我在互联网上找到的一个例子“http://www.virtuosoft.eu/code/bootstrap-duallistbox/”,并且是第二个例子。如何从列表中移动内容

这里是我的2名列表和按钮的代码

<div class="btn-group buttons"> 
    <button title="Move selected" type="button" class="btn move btn-default" "demo2"></button> 
    </div> 
    <select style="height: 197px;" name="duallistbox_demo2_helper1" class="form-control" id="bootstrap-duallistbox-nonselected-list_duallistbox_demo2" multiple="multiple"> 
    <option value="option7">Option 7</option> 
    <option value="option8">Option 8</option> 
    <option value="option9">Option 9</option> 
    <option value="option0">Option 10</option> 
    <option value="option0">Option 11</option> 
    <option value="option0">Option 12</option> 
    </select> 


    <div class="btn-group buttons">  
    <button title="Remove selected" type="button" class="btn remove btn-default"></button>  
    </div> 
    <select style="height: 197px;" name="duallistbox_demo2_helper2" class="form-control" id="bootstrap-duallistbox-selected-list_duallistbox_demo2" multiple="multiple"> 
    <option value="option2">Option 2</option> 
    <option value="option3" selected="selected">Option 3</option> 
    <option value="option4">Option 4</option></select> 

这里是我的JS

// move list content 
var demo2 = $('.demo2').bootstrapDualListbox({ 
    nonSelectedListLabel: 'Non-selected', 
    selectedListLabel: 'Selected', 
    preserveSelectionOnMove: 'moved', 
    moveOnSelect: false, 
    nonSelectedFilter: 'ion ([7-9]|[1][0-2])' 
}); 
+0

@TheGarrett你好,请[github上(https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox/blob/master/demo/index.html) – kuldipem 2014-12-05 09:12:56

+0

从strart经过吧.. 。你的eI得到了来自 – TheGarrett 2014-12-05 09:14:48

+0

的JS问题,你的代码是你使用了错误的类语法'''class =“btn move btn-default”“demo2”''',它应该是'''class =“btn移动btn-default demo2“'''。 – kuldipem 2014-12-05 09:16:50

回答

0

以下JS应该为你的第一个选择框中工作。请确保选择正确的元素。

var demo2 = $('#bootstrap-duallistbox-nonselected-list_duallistbox_demo2').bootstrapDualListbox({ 
    nonSelectedListLabel: 'Non-selected', 
    selectedListLabel: 'Selected', 
    preserveSelectionOnMove: 'moved', 
    moveOnSelect: false, 
    nonSelectedFilter: 'ion ([7-9]|[1][0-2])' 
}); 
+0

仍然无法正常工作。我只能从列表中选择1个项目,但选择多个内容并且移动功能仍然不起作用 – TheGarrett 2014-12-05 09:19:48