Question

我正在尝试使用此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>

Answer 1

In your code, you're initialising and populating the DualSelectList twice. Once in the script in the head, and again in the script in the body. Each time you call $('#dualSelectExample').DualSelectList(), you'll attach a new instance of the DualSelectList to #dualSelectExample.

The documentation for the plugin, while basic, covers how to set the contents of an existing DualSelectList (stored as the variable dsl, as in your code).

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

So in your function RetriveAppointmentContact(), you should be doing the above instead of initialising another instance of the list.

网格显示两次

1 个答案: