网格显示两次答案

【问题标题】：Grid display twice网格显示两次
【发布时间】：2017-11-08 19:46:28
【问题描述】：

我正在尝试使用这个jquery dual select plugin。我自定义了 html 页面并添加了一个下拉菜单来选择一个视图。根据选择的视图，网格将显示数据。我看到的问题是每当我切换视图时，网格都会显示多次。

当我们切换视图或向网格动态添加新项目时，请告诉我限制它只显示一次的过程。

 <!doctype html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery DualSelectList Example</title>
    <link rel="stylesheet" type="text/css" 
    href="bala.DualSelectList/css/bala.DualSelectList.css">
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" 
    rel="stylesheet" type="text/css">
    <script type="text/javascript" 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="bala.DualSelectList/js/bala.DualSelectList.jquery.js"></script>
    <script type="text/javascript">
        function scheduleA(event) {    
           if (this.options[this.selectedIndex].text == "All Contacts") {
               BindAllContacts();
           }
           if (this.options[this.selectedIndex].text == "Contacts") {
               RetriveAppointmentContact();
           }

        }

        function RetriveAppointmentContact() {

             var dsl = $('#dualSelectExample').DualSelectList({
               'candidateItems' : ['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05', 'Item 06', 'Item 07'],
               'selectionItems' : ['Item 08', 'Item 09', 'Item 03']
             });

             $('#getSel').click(function(){
               var res = dsl.getSelection();
               var str = '';
               for (var n=0; n<res.length; ++n) str += res[n] + '\n';
               $('#selResult').val(str);
             });

             $('#addSel').click(function(){
               var items = $('#addIterms').val().split('\n');
               var res = dsl.setCandidate(items);
             });
          }
    </script>
    <style>
        body {
        background-color: #fafafa;
        }
        .container {
        margin: 150px auto;
        font-family: 'Roboto';
        max-width: 960px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery DualSelectList Example</h1>
        <label title="Please select a View" id="view">Please select a View: </label>
        <select onchange="scheduleA.call(this, event)">
            <option value="select">Please select</option>
            <option value="contacts">Contacts</option>
            <option value="allcontacts">All Contacts</option>
        </select>
        <div id="dualSelectExample" style="padding: 10px; width: 400px; height: 300px; background-color: rgb(240, 240, 240);"></div>
        <br>
        <div style="margin-right: 5px; float: left;">
            <div id="addSel" style="padding: 5px; width: 150px; text-align: center; color: black; cursor: pointer; background-color: lightgray;">Add Items</div>
            <div class="ui-widget"><input id="addIterms" style="padding: 5px; width: 150px; cursor: pointer;" type="text"></div>
            <!--        <textarea id="addIterms" type="textarea"></textarea>-->
        </div>
        <div style="float: left;">
            <div id="getSel" style="padding: 5px; width: 150px; text-align: center; color: black; cursor: pointer; background-color: lightgray;">Get Selection</div>
            <input id="selResult" type="text">
            <!--        <textarea id="selResult" type="textarea"></textarea>-->
        </div>
    </div>
    <script type="text/javascript">
        var dsl = $('#dualSelectExample').DualSelectList({
            'candidateItems': [],
            'selectionItems': []
        });

    </script>
</body>

【问题讨论】：

标签： javascript jquery html multi-select

【解决方案1】：

在您的代码中，您将初始化并填充DualSelectList 两次。一次在头部的脚本中，然后在正文中的脚本中。每次调用$('#dualSelectExample').DualSelectList() 时，都会将DualSelectList 的新实例附加到#dualSelectExample。

该插件的文档虽然基本，但涵盖了如何设置现有 DualSelectList 的内容（存储为变量 dsl，就像在您的代码中一样）。

dsl.setCandidate(['Item 01', 'Item 02', 'Item 03', 'Item 04', 'Item 05']);
dsl.setSelection(['Item 06', 'Item 07', 'Item 08', 'Item 09', 'Item 10']);

因此，在您的函数RetriveAppointmentContact() 中，您应该执行上述操作，而不是初始化列表的另一个实例。

【讨论】：

我根据您的建议更改了代码，现在我看到网格只显示一次，但是当我切换视图时，数据在同一个网格中重复和增长。