Question

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

随时随地生成功能？动态功能？我可以轻松循环选择框而不是“$（'＃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>

Answer 1

由于id不能相同，您可以定义一个全局变量，比如索引来记住作为id的一部分的计数;

喜欢用id“select-repo”+ index动态添加select;例如select-repo1，select-repo999

以下是一个例子：

var index = 1;

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

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

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

1 个答案: