Question

我尝试将文字附加到<!DOCTYPE html> <html> <head> <title>Score Keeper</title> </head> <body> <h1><span id="p1Display">0</span> to <span id="p2Display">0</span></h1> <p>Playing to: 5</p> <input type="number"> <button id="p1">Player One</button> <button id="p2">Player Two</button> <button id="reset">Reset</button> <script src="script.js"></script> </body> </html>中添加了import csv from collections import namedtuple fields = ('age', 'workclass', 'fnlwgt', 'education', 'education_num', 'marital_status', 'occupation', 'relationship', 'race', 'sex', 'capital_gain', 'capital_loss', 'hours_per_week', 'native_country', 'target') CensusRecord = namedtuple('CensusRecord', fields) with open("./data/adult_data.csv","r") as f: r = csv.reader(f, delimiter=',') for row in r: data.append(CensusRecord( age = int(row[0]), workclass = row[1].strip(), fnlwgt = float(row[2].strip()), education = row[3].strip(), education_num = int(row[4]), marital_status = row[5].strip(), occupation = row[6].strip(), relationship = row[7].strip(), race = row[7].strip(), sex = row[9].strip(), capital_gain = int(row[10]), capital_loss = int(row[11]), hours_per_week = int(row[12]), native_country = row[13].strip(), target = row[14].strip()))文字选项的任何新值。附加的文本我想在选择元素（在我的情况下通过mvc帮助程序）上设置。

问题是进入templateResult的数据没有元素。在我搜索到的任何地方，data.element都用于进入DOM，但它并不适合我，我不知道为什么。如果我查看createTag函数，params也没有元素。容器只是一个＆＃34; li＆＃34;显然还没有在dom，没有孩子或父母。

以下是代码：

select2

选择的一个例子是：

选择freeform $('.custom-dropdown').each(function() { $(this).css('width', '100%'); if ($(this).hasClass('freeform')) { $(this).select2({ tags: true, createTag: function(params) { return { id: params.term, text: params.term, newOption: true } }, templateResult: function(data, container) { var $result = $("<span></span>"); $result.text(data.text); if (data.newOption) { //data.element is undefined here!!! } } return $result; }, placeholder: "Press ENTER for list of options", allowClear: true, selectOnClose: true }); } else { $(this).select2({ placeholder: "Press ENTER for list of options", allowClear: true, selectOnClose: true, }); } $(this).on('select2:select', function(e) { if (e.params.data.text != '') { var id = $(this).attr('id'); var select2 = $("span[aria-labelledby=select2-" + id + "-container]"); select2.removeAttr('style'); } }); $(this).on('select2:close', function() { $(this).focus(); }); });

Answer 1

templateResult用于创建dom。在创建dom之前，您无法访问dom。

也许你需要这样的东西：

（将＆＃34; data-appendme＆＃34;的值附加到createTag中选项的文字

＆＃13;

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>

<body>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
    <select class="custom-dropdown freeform" data-appendme="blorg"></select>
    <script>
        $('.custom-dropdown').each(function () {
            var $select = $(this);
            $select.css('width', '100%');
            if ($select.hasClass('freeform')) {
                $select.select2({
                    tags: true,
                    createTag: function (params) {
                        return {
                            id: params.term,
                            text: params.term + $select.data('appendme'),
                            newOption: true
                        }
                    },
                    templateResult: function (data, container) {
                        var $result = $("<span></span>");
                        $result.text(data.text);
                        return $result;
                    },
                    placeholder: "Press ENTER for list of options",
                    allowClear: true,
                    selectOnClose: true
                });
            } else {
                $(this).select2({
                    placeholder: "Press ENTER for list of options",
                    allowClear: true,
                    selectOnClose: true,
                });
            }

            $(this).on('select2:select', function (e) {
                if (e.params.data.text != '') {

                    var id = $(this).attr('id');
                    var select2 = $("span[aria-labelledby=select2-" + id + "-container]");
                    select2.removeAttr('style');
                }
            });
            $(this).on('select2:close', function () {
                $(this).focus();
            });
        });

    </script>
</body>

</html>

＆＃13;

如果你不想要＆＃34; blorg＆＃34;在选项中但希望它在select标记中，您可以将其替换为templateResult中的空字符串。

Select2 templateResult数据没有要引用的元素

1 个答案: