如何使用配置了ajax搜索的select2 jquery插件实现选择所有功能。

时间:2017-04-10 06:37:25

标签: javascript jquery select2 jquery-select2-4

Iam目前正在使用select2 jquery插件从ajax调用中动态填充的列表中选择数据。我需要实现选择所有功能,以便用户可以使用全选按钮一次选择所有选项。我试图在jsfidde中的这个例子后实现这个。

Click here to see the jsfiddle

但是选择大量商品的商品说500件商品。它会使浏览器挂起一段时间。请提出更好的方法来实现这一点,而不会出现任何性能问题

$.fn.select2.amd.require([
 'select2/utils',
 'select2/dropdown',
 'select2/dropdown/attachBody'
 ], function (Utils, Dropdown, AttachBody) {
 function SelectAll() { }

SelectAll.prototype.render = function (decorated) {
var $rendered = decorated.call(this);
var self = this;

var $selectAll = $(
  '<button type="button">Select All</button>'
);

$rendered.find('.select2-dropdown').prepend($selectAll);

$selectAll.on('click', function (e) {
  var $results = $rendered.find('.select2-results__option[aria-selected=false]');

  // Get all results that aren't selected
  $results.each(function () {
    var $result = $(this);

    // Get the data object for it
    var data = $result.data('data');

    // Trigger the select event
    self.trigger('select', {
      data: data
    });
  });

  self.trigger('close');
});

return $rendered;

};

 $("select").select2({
placeholder: "Select Option(s)...",
dropdownAdapter: Utils.Decorate(
  Utils.Decorate(
    Dropdown,
    AttachBody
  ),
  SelectAll
  ),
  });
 });

1 个答案:

答案 0 :(得分:0)

这是重复的问题 JQuery Select2 - How to select all options

使用复选框为多个选择提供解决方案。

如果它的负载超过你应该添加额外的隐藏字段以获得逗号分隔值。

尝试以下代码。 HTML:

<form method="post" action="login.php" id="yw0" class="well form-horizontal">
        <div class="login">
                        <div class="form">
                <div class="control-group">
                    <label for="userInput" class="control-label required">Benutzer</label>
                    <div class="controls">
                        <input type="text"
                               name="loginName"
                               maxlength="32"
                               id="userInput">
                        <span style="display:none" 
                              class="help-inline error"
                              id="VierCom_Base_Models_LoginForm_username_em_"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="VierCom_Base_Models_LoginForm_password" class="control-label required">Passwort</label>
                    <div class="controls">
                        <input type="password"
                               name="loginPwd"
                               maxlength="32"
                               id="VierCom_Base_Models_LoginForm_password">
                            <span style="display: none"
                                  class="help-inline error"
                                  id="VierCom_Base_Models_LoginForm_password_em_"></span>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="submit"
                                name="btnLogin"
                                class="btn">Login</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

JQuery:

import requests
import re
import requests.utils, pickle
import argparse
import time
from bs4 import BeautifulSoup
import csv

user_field = "loginName"
pass_field = "loginPwd"

with requests.session() as c:
           login_url = 'https://login.professional-cockpit.de/login.php'
           after_login_url = 'https://login.professional-cockpit.de/qlikView.php'

           USERNAME = "*********"
           PASSWORD = "*********"
           c.get(login_url)

           login_data = dict(user_field=USERNAME,pass_field=PASSWORD)

           ### login to website
           res = c.post(login_url, data=login_data)

           print(res.text)

您可以设置type =&#34;隐藏&#34;用于输入字段。