时间戳

首页 > 解决方案 > 多个类似的“选择选项”ID，动态 Javascript 代码

javascript - 多个类似的“选择选项”ID，动态 Javascript 代码

问题描述

在此处输入图像描述

1）我需要找到一种方法来拥有多个 id="select-repo" 因为每个“添加另一个项目”都是相同的。“添加另一个项目”假设添加另一行具有该 id="select-repo" 的 html，现在它只是一个空文本框。

随时随地生成函数？动态函数？我可以轻松地循环选择框，但不能循环我相信的 "$('#select-repo').selectize({" 函数。

2）解决数字1后，我需要找到一种方法来知道选择一个选项后要更新哪一行数据。

3) 使用 VUE.JS 是否更容易完成，因为我使用的是 laravel ，所以使用 Vue.JS 集成应该更容易

你有什么建议，有人告诉我使用 ReactJS / 样式组件之类的东西？无论如何不要切换框架来完成这项工作？

请指教。

HTML 代码

<td><select id="select-repo" class="repositories"></select></td>

JS代码

<script>
                //<select id="select-repo"></select>
                $('#select-repo').selectize({
                    valueField: 'url',
                    labelField: 'name',
                    searchField: 'name',
                    options: [],
                    create: false,
                    render: {
                        option: function(item, escape) {
                            return '<div>' +
                                '<span class="title">' +
                                    '<span class="name"><i class="icon ' + (item.fork ? 'fork' : 'source') + '"></i>' + escape(item.name) + '</span>' +
                                    '<span class="by">' + escape(item.username) + '</span>' +
                                '</span>' +
                                '<span class="description">' + escape(item.description) + '</span>' +
                                '<ul class="meta">' +
                                    (item.language ? '<li class="language">' + escape(item.language) + '</li>' : '') +
                                    '<li class="watchers"><span>' + escape(item.watchers) + '</span> watchers</li>' +
                                    '<li class="forks"><span>' + escape(item.forks) + '</span> forks</li>' +
                                '</ul>' +
                            '</div>';
                        }
                    },
                    score: function(search) {
                        var score = this.getScoreFunction(search);
                        return function(item) {
                            return score(item) * (1 + Math.min(item.watchers / 100, 1));
                        };
                    },
                    load: function(query, callback) {
                        if (!query.length) return callback();
                        $.ajax({
                            url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
                            type: 'GET',
                            error: function() {
                                callback();
                            },
                            success: function(res) {
                                callback(res.repositories.slice(0, 10));
                            }
                        });
                    },
                    onChange: function(value) {
               alert(value);
          }
                });
                </script>

标签： javascriptjquerylaravelvue.jsselectize.js

解决方案

由于 id 不能相同，您可以定义一个像 index 这样的全局变量来备注计数作为 id 的一部分；

喜欢动态添加id为“select-repo”+index的select；例如选择-repo1，选择-repo999

这是一个例子：

var index = 1;

function addSelect(){
    $('#somewhere').append('<select id="select-repo'+index+'">');
    $('select-rep'+index).selectize(){
        ....
    };
    index++;
}

您可以通过解析 Id 字符串轻松获取选择索引。

推荐阅读