Как мне создать несколько динамических селекторов выбора на основе моего цикла jinja for? - PullRequest
Новая
       21

Как мне создать несколько динамических селекторов выбора на основе моего цикла jinja for?

0 голосов
/ 22 мая 2019

В настоящее время я пытаюсь создать несколько раскрывающихся списков динамического выбора на основе пользовательского ввода. Этот ввод будет передан на мою HTML-страницу через jinja в цикле for.

На основе цикла for я создам соответствующее количество пар раскрывающегося списка.

Кроме того, я также планирую перенастроить id каждого выпадающего списка, чтобы я мог легко получить их значения в своем коде Flask. Я пытался писать для циклов в JavaScript, чтобы изменить идентификатор.

Я пытался написать некоторый javascript для выполнения этих функций, но, похоже, это не сработало. На самом деле не очень знаком с javascript.

HTML-код 

<form method="POST">
    {% for i in no_of_filters: %}
        <select id="col" class="selectpicker" onchange='refreshList(event,'{{ i+1|string }}')';>
            {% for c in cols: %}
                <option value="{{c}}">{{c}}</option>
            {% endfor %}
        </select>
        <select id ="val" class="selectpicker" multiple data-live-search="true">
            {% for uv in unique_val: %}
                <option value="{{uv}}">{{uv}}</option>
            {% endfor %}
        </select>
    {% endfor %}
    <input type="submit">
</form>
    <script>
        console.clear()

        var colElements = document.querySelectorAll('#col');
        var valElements = document.querySelectorAll('#val');

        for (var i = 0; i < colElements.length; i++)
            colElements[i].id = 'col' + (i+1);

        for (var j = 0; j < valElements.length; j++)   
            valElements[i].id = 'val' + (j+1);


        function refreshList(event, i){
            var col_select = document.getElementById('col'.concat(i));
            var uv_select = document.getElementById('val'.concat(i));

            column = col_select.value;

            fetch('/col/' + column).then(function(response) {
                response.json().then(function(data) {
                    var optionHTML = ' ';
                    for (var uv of data.unique_val) {
                        optionHTML += '<option value="' + uv.id + '">' + uv.value + '</option>';
                    }
                    uv_select.innerHTML = optionHTML;
                    $('#val'.concat(i)).on('change', function() {
                        $('#val'.concat(i)).selectpicker('refresh');
                    });
                })
            });
        }



    </script>

Ожидается: если no_of_filters = 7, цикл for должен создать 7 пар раскрывающихся полей динамического выбора, с настроенными идентификаторами по javascript

Факт: создание только 1 пары выпадающих списков выбора, без настроенного идентификатора

1 Ответ

1 голос
/ 22 мая 2019

Выбор имеет тот же идентификатор.Попробуйте добавить разные идентификаторы для каждого выбора, как показано ниже:

HTML: 

<form method="POST">
{% for i in no_of_filters: %}
    <select id="col-{{i}}" class="selectpicker col" 
    onchange='refreshList(event,'{{ i+1|string }}')';>
        {% for c in cols: %}
            <option value="{{c}}">{{c}}</option>
        {% endfor %}
    </select>
    <select id ="val-{{i}}" class="selectpicker val"
        multiple data-live-search="true">
        {% for uv in unique_val: %}
            <option value="{{uv}}">{{uv}}</option>
        {% endfor %}
    </select>
{% endfor %}
<input type="submit">
</form>

js: 

<script>
        console.clear()

        var colElements = document.querySelectorAll('select.col');
        var valElements = document.querySelectorAll('select.val');

        for (var i = 0; i < colElements.length; i++)
            colElements[i].id = 'col-' + (i+1);

        for (var j = 0; j < valElements.length; j++)   
            valElements[i].id = 'val-' + (j+1);


        function refreshList(event, i){
            var col_select = document.getElementById('col-'.concat(i));
            var uv_select = document.getElementById('val-'.concat(i));
            // same logic
        }



    </script>
...