时间戳

首页 > 解决方案 > 使用已在多选复选框中选择的数组创建新的移动页面

javascript - 使用已在多选复选框中选择的数组创建新的移动页面

问题描述

我创建了一个多列表复选框表单，并尝试将选定的值移动到另一个移动页面，以便在选择选定的操作按钮时显示。但是，我看到了一些针对弹出窗口的响应，而不是针对新的静态移动页面的响应。

  var k = 0;
        for (var i = 0; i < 300; i++) {
            var row = {};
            row["firstname"] = firstNames[k];


            data[i] = row;
            k++;
        }

        var source =
        {
            localdata: data,
            datatype: "array"
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $('#dropdownlist').jqxDropDownList({
            selectedIndex: 0, checkboxes: true, theme: theme, 
    autoDropDownHeight: true, source: dataAdapter, 
    displayMember: "firstname", valueMember: "notes", 
    itemHeight: 70, height: 40, width: '90%',
            renderer: function (index, label, value) {
            var datarecord = data[index];
            var imgurl = '../../images/' + label.toLowerCase() 
    + '.png';
            var img = '<img height="50" src="' + imgurl + '"/>';
            var table = '<table><tr><td style="width: 55px;
    " rowspan="2">' 
    + '</td><td>' + datarecord.firstname + " " + '</td></tr><tr><td>'  
    + '</td></tr></table>';
                return table;
            }
        });
        initSimulator("dropdownlist");
    });
 </script>
 </head>
 <body class='default'>
 <div id="demoContainer" class="device-mobile">
    <div id="container" class="device-mobile-container">
     <h3 style="margin-left: 5%; margin-top: 
 20px;">Select employees:</h3>
        <div style="margin-left: 5%;" id="dropdownlist"></div>
     </div>
 </div>

 <input type="button" id="btnSelected" value="Get Selected" />

第二页的代码将用于从上面列出的代码中捕获结果：

      <table id="dataAdapter" name = "firstnames" class="OutlinePage"> 

    <thead class="OutlineText">

    <tr>

    <td>Name</td>
    <td></td>
    <td></td>

    </tr>
    </thead>

    <tbody class=OutlineText">

    </tbody>

    </table>
    </div>
    </body>
    <script>

  function AddData() { 

   {

    var rows = "";

    var name = document.getElementById("firstnames").value;

   var position = document.getElementById("array").value;

    rows += "<td>" + name + "</td><td>" + position + "</td>";

    var tbody = document.querySelector("#list tbody");

    var tr = document.createElement("tr");

    tr.innerHTML = rows;

    tbody.appendChild(tr)

    //

    }

   }

   function ResetForm() {

    document.getElementById("firstnames").reset();

   }

   </script></h1>


   <script>
   // from checkboxes7.html
   document.getElementById("write").innerHTML = window.location.search;
    </script>


   <script>
   function getParameterByName(name, url) {
    if (!url) url = window.location.href;
   name = name.replace(/[\[\]]/g, '\\$&');
   var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
       results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
     return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }</script>


      <script>
      function show() {
      document.getElementById("write").innerHTML = name;

       }

    var sn = getParameterByName('firstnames');

    document.getElementById("write").innerHTML = sn;

    </script>
      </p>

    </html>

标签： javascriptjqueryarrays

解决方案

有很多东西没有定义，没有合适的库我无法测试。发现一些语法问题，所以我清理了这些和代码。

$(function() {
  var k = 0;
  for (var i = 0; i < 300; i++) {
    var row = {};
    row.firstname = firstNames[k];
    data[i] = row;
    k++;
  }

  var source = {
    localdata: data,
    datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source);

  $('#dropdownlist').jqxDropDownList({
    selectedIndex: 0,
    checkboxes: true,
    theme: theme,
    autoDropDownHeight: true,
    source: dataAdapter,
    displayMember: "firstname",
    valueMember: "notes",
    itemHeight: 70,
    height: 40,
    width: '90%',
    renderer: function(index, label, value) {
      var datarecord = data[index];
      var imgurl = '../../images/' + label.toLowerCase() + '.png';
      var img = '<img height="50" src="' + imgurl + '"/>';
      var table = '<table><tr><td style="width: 55px;" rowspan="2">';
      table += '</td><td>' + datarecord.firstname + " " + '</td></tr><tr><td>';
      table += '</td></tr></table>';
      return table;
    }
  });
  initSimulator("dropdownlist");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demoContainer" class="device-mobile">
  <div id="container" class="device-mobile-container">
    <h3 style="margin-left: 5%; margin-top: 20px;">Select employees:</h3>
    <div style="margin-left: 5%;" id="dropdownlist"></div>
  </div>
</div>

<input type="button" id="btnSelected" value="Get Selected" />

希望有帮助。

推荐阅读