我在这里发布了类似的问题：Flask - Data inputting on the client side
但是，我想出了另一种方法来解决该问题，现在在下面遇到了一个新方法。
简而言之，我正在为我们的客户建立一个门户，他们可以登录并上传其财务文件。 flask中有一个预定义的架构，用于映射上载文档中的财务项目。例如，所有与“现金”相关的帐户都将被简单地映射为“现金”。
下面的html代码基本上呈现了一个类似于上载文件的表格，并带有附加的“映射”列，该列映射了帐户的每一行。如果在财务文档中添加了新帐户，则将有一个下拉部分供客户选择映射架构。屏幕截图包含在此处以供您查看。
https://drive.google.com/file/d/1RuYq3rdaG5XSxLTPYO46PlqBujuy_I8A/view?usp=sharing
我的问题是如何为按钮“确认映射”设置事件，以将所有选定的下拉输入以JSON对象的形式（最好）发送回Flask服务器。在这种情况下，我希望JSON为：
{
"Cash" : "Lucky money",
"Debt" : "Bad debt"
}
我在下面包含一些html代码。我知道它的再现性不是很好，但是我的公司代码库太大而无法共享。我只是对完成任务的一些通用方法感兴趣。
<!-- results.html -->
<body>
<div>
<table id="Mapped table">
<h2 align='center'>Mapped data</h2>
<tr>
{% for col in column_names %}
<th>{{col}}</th>
{% endfor %}
</tr>
{% for row in row_new %}
<tr>
{% for col, row_ in zip(column_names, row) %}
{% if col == link_column %}
<td>
<select id="dropbtn">
<option value="1">Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
<div id="selection"></div>
<script>
var e = document.getElementById("dropbtn");
var strUser = e.options[e.selectedIndex].text;
</script>
</td>
{% else %}
<td>{{row_}}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
</div>
<div class="wrapper">
<button class="button" id="myBtn">Confirm mapping</button>
</body>
最佳答案
您有一些问题：
ID必须是唯一的。因此，您可以考虑将select id =“ dropbtn”更改为** select class =“ dropbtn”
表格应包含正文，页眉和页脚。相反，您有一系列的行（即：tr）
表ID包含一个空格。按ID选择时，这是一个问题。为此，请查看escapeSelector
您的问题的可能解决方案可以是：
$('#myBtn').on('click', function(e) {
var drpdbJson = {};
// for each row containing a select....
$('#Mapped\\ table tr:gt(0):has(select)').each(function(idx, ele) {
// get the selected value
var drpdwnKey = $(ele).find('.dropbtn option:selected').text();
// get the second column text
var drpdwnValue = $(ele).find('td:eq(1)').text();
// add to the json result
if (drpdbJson[drpdwnKey] == undefined) {
drpdbJson[drpdwnKey] = drpdwnValue;
} else {
drpdbJson[drpdwnKey] = (typeof drpdbJson[drpdwnKey] === 'string') ?
[drpdbJson[drpdwnKey], drpdwnValue] : [...drpdbJson[drpdwnKey], drpdwnValue];
}
})
// print the json obj
// pay attention: a json cannot contain duplicated keys:
// if you select the same value for both select in the example....
console.log(JSON.stringify(drpdbJson))
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h2 align='center'>Mapped data</h2>
<table id="Mapped table">
<tr>
<th>Account Number</th>
<th>Account Description</th>
<th>Amount</th>
<th>Mapping</th>
</tr>
<tr>
<td>2010</td>
<td>Lucky money</td>
<td>1111.0</td>
<td>
<select class="dropbtn">
<option value="1" selected>Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
<tr>
<td>1234</td>
<td>Bad debt</td>
<td>222222.0</td>
<td>
<select class="dropbtn">
<option value="1">Cash</option>
<option value="2" selected>Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
<tr>
<td>1234</td>
<td>USD</td>
<td>222222.0</td>
<td>
<select class="dropbtn">
<option value="1" selected>Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
<tr>
<td>1234</td>
<td>Petty cash</td>
<td>222222.0</td>
<td>
<select class="dropbtn">
<option value="1" selected>Cash</option>
<option value="2">Debt</option>
<option value="3">Retained Earnings</option>
</select>
</td>
</tr>
</table>
</div>
<div class="wrapper">
<button class="button" id="myBtn">Confirm mapping</button>
</div>