Question

我有大量下拉列表和邮政编号。由于使用常规下拉列表将其向下滚动相当困难，因此我开始想到实现Select2 jQuery（版本4）下拉（因为它还具有开箱即用的搜索功能）。现在，由于它的性质和列表的大小，加载需要很长时间，所以我虽然可以使用一些分页并将初始列表限制为50个项目，并在滚动或搜索时展开它。最后我发现分页是为ajax加载保留的（如果我正在正确阅读文档），这是我想避免的。

我当前的选项组看起来像这样

<option data-name="City Name" data-postal-number="11111">City Name [11111]</option>

在数据库中，我将占位符data-name和data-postal-number插入两个数据库字段（设计所需）。

我已经设法创建了以下用于初始化Select2的JS，但不知道如何设置在其中正确设置占位符以将其提交到数据库（使用Codeigniter 3，但怀疑与此问题相关）

$.fn.select2.amd.require(
    ['select2/data/array', 'select2/utils'],
    function (ArrayData, Utils) {
        function CustomData($element, options) {
            CustomData.__super__.constructor.call(this, $element, options);
        }

        function contains(str1, str2) {
            return new RegExp(str2, "i").test(str1);
        }

        Utils.Extend(CustomData, ArrayData);

        CustomData.prototype.query = function (params, callback) {
            if (!("page" in params)) {
                params.page = 1;
            }
            var pageSize = 50;
            var results = this.$element.children().map(function(i, elem) {
                if (contains(elem.innerText, params.term)) {
                    return {
                        id:[elem.innerText, i].join(""),
                        text:elem.innerText
                    };
                }
            });
            callback({
                results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
                pagination:{
                    more:results.length >= params.page * pageSize
                }
            });
        };

        $("#postal_number_selector").select2({
            ajax:{},
            allowClear:true,
            width:"element",
            dataAdapter:CustomData
        });
    });

任何帮助或信息在哪里阅读它都是非常感谢（如果可能的话，希望避免真正的ajax / json加载......）

提前致谢

Answer 1

尝试使用HTML data-*，而不是使用HTML <option value="...">属性。

然后，在值内部，将City Name和11111与一些分隔符连接起来，例如|||。

之后，你可以通过分割从选项标签（<option value = "City Name|||11111">City Name [11111]</option>发送的值，提取服务器端的两个值（例如，使用PHP或ASP - 它取决于您的服务器端架构））。

这就是我在PHP服务器端的方式：

<?php
$select_name = isset($_POST['select_name']) ? $_POST['select_name'] : "";
//Get the value(s) and extract them
$select_value = explode("|||", $select_name);

echo $select_value[0]; //This should contain "City Name"
echo $select_value[1]; //This should contain "11111"
?>

选择2提交占位符值

1 个答案: