Несколько идентичных идентификаторов «Select Option», динамический код Javascript - PullRequest
Новая
       13

Несколько идентичных идентификаторов «Select Option», динамический код Javascript

0 голосов
/ 05 июня 2018

enter image description here

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>

1 Ответ

0 голосов
/ 05 июня 2018

Поскольку идентификатор не может быть одинаковым, вы можете определить глобальную переменную , например индекс, чтобы запоминать счет как часть идентификатора;

Как динамически добавлять select с идентификатором "select-репо "+ индекс;например, select-repo1, select-repo999

Вот пример: 

var index = 1;

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

И вы можете легко получить индекс выбора по строке разбора Id.

...