Javascript 如何基于jinja for循环创建多个动态选择器选择器?
目前,我正在尝试根据用户输入创建多个动态选择选择器下拉列表。这个输入将在for循环中通过jinja传递到我的HTML页面 基于for循环,我将创建相应数量的下拉列表对 除此之外,我还计划重新配置每个下拉列表的id,以便在我的Flask代码中轻松检索它们的值。我尝试用javascript编写for循环来修改id 我曾尝试编写一些javascript来实现这些功能,但似乎不起作用。实际上对javascript不是很熟悉 HTML代码Javascript 如何基于jinja for循环创建多个动态选择器选择器?,javascript,html,flask,jinja2,bootstrap-selectpicker,Javascript,Html,Flask,Jinja2,Bootstrap Selectpicker,目前,我正在尝试根据用户输入创建多个动态选择选择器下拉列表。这个输入将在for循环中通过jinja传递到我的HTML页面 基于for循环,我将创建相应数量的下拉列表对 除此之外,我还计划重新配置每个下拉列表的id,以便在我的Flask代码中轻松检索它们的值。我尝试用javascript编写for循环来修改id 我曾尝试编写一些javascript来实现这些功能,但似乎不起作用。实际上对javascript不是很熟悉 HTML代码 <form method="POST"> {%
<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>
{i在没有\u个过滤器的\u中的百分比:%}
{cols中c的百分比:%}
{{c}}
{%endfor%}
{唯一值中uv的百分比:%}
{{uv}}
{%endfor%}
{%endfor%}
控制台清除()
var colElements=document.querySelectorAll(“#col”);
var valElements=document.querySelectorAll('val');
对于(var i=0;i
预期:如果没有\u过滤器=7,for循环应该创建7对动态选择选择器下拉字段,并通过javascript配置ID
实际:仅创建1对选择选择器下拉列表,没有配置的id。选择具有相同的id。尝试为每个选择添加不同的id,如下所示: Html:
{i在没有\u个过滤器的\u中的百分比:%}
{cols中c的百分比:%}
{{c}}
{%endfor%}
{唯一值中uv的百分比:%}
{{uv}}
{%endfor%}
{%endfor%}
js:
控制台清除()
var colElements=document.querySelectorAll('select.col');
var valElements=document.querySelectorAll('select.val');
对于(var i=0;i
<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>
<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>