私はチュートリアルを使用して二重のリストボックスを実装しているかのリスト

Question

をリセットするには、デュアルリストボックス一つの特徴は、全二重のリストをクリアして、ボタンのクリックでデータの別のセットを移入することです。どうすればこれを達成できますか？事前に感謝の意を表します。

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox(); 
demo1.bootstrapDualListbox('refresh'); 

リセットのクリックで選択されたリスト空にする：リセットのクリックでリストを再作成するために

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox(); 
demo1.bootstrapDualListbox('destroy', true); 

を：

var demo1 = $('[name=duallistbox_demo1]').bootstrapDualListbox(); 
demo1.bootstrapDualListbox('refresh'); 

リスト初めての移入に

これを実行すると、選択されていないアイテムがすべて表示されているボックスと、選択されたアイテムが表示されているボックスが表示されます。 eが消えた。

Answer 1

prop('selected', false)をすべてのオプションで呼び出し、希望するものをprop('selected', true)にコールしてから、DLBでbootstrapDualListbox('refresh', true)を呼び出して、すべてを選択解除してすべてのオプションを選択解除することができます。

<form> 
    <select multiple="multiple" size="10" name="duallistbox_demo1"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
    <option value="option3" selected="selected">Option 3</option> 
    <option value="option4">Option 4</option> 
    <option value="option5">Option 5</option> 
    <option value="option6" selected="selected">Option 6</option> 
    <option value="option7">Option 7</option> 
    <option value="option8">Option 8</option> 
    <option value="option9">Option 9</option> 
    <option value="option0">Option 10</option> 
    </select> 
    <button type="button" onclick="dlb_repopulate(['option2']);">Population 1</button> 
    <button type="button" onclick="dlb_repopulate(['option1', 'option2', 'option9']);">Population 2</button> 
    <button type="button" onclick="dlb_repopulate(['option1', 'option6', 'option3', 'option8', 'option7']);">Population 3</button> 
    <button type="button" onclick="dlb_updateopts([['option11', 'Opt 11'], ['option12', 'Opt 12']]);">Update 1</button> 
    <button type="button" onclick="dlb_updateopts([['option24', 'Opt 24'], ['option33', 'Opt 37']]);">Update 2</button> 
</form> 
<script> 
    $('[name=duallistbox_demo1]').bootstrapDualListbox(); 
    function dlb_repopulate (new_population) { 
    $('[name=duallistbox_demo1] option').prop('selected', false); 
    new_population.forEach(function(option) { 
     $('[name=duallistbox_demo1] option[value="'+option+'"]').prop('selected', true); 
    }); 
    $('[name=duallistbox_demo1]').bootstrapDualListbox('refresh', true); 
    } 
    function dlb_updateopts (new_opts) { 
    $('[name=duallistbox_demo1]').empty(); 
    new_opts.forEach(function (opt) { 
     $('[name=duallistbox_demo1]').append($('<option  value="'+opt[0]+'">'+opt[1]+'</option>')); 
    }); 
    $('[name=duallistbox_demo1]').bootstrapDualListbox('refresh', true); 
    } 
</script>