带有自动提交按钮的烧瓶中的相互依赖下拉列表

Question

烧瓶中带有自动提交按钮的相互依赖的下拉菜单.. 假设下表来自 sqlite 数据库，我希望通过以下方式进行 3 个下拉菜单 情况1- 如果下拉 1 被选为“ab”，那么下拉 2 必须建议我选择“a”和“b”选项，如果我在下拉 2 中选择“a”选项，那么下拉 3 必须建议我“a”和“aaa”作为选项。 我想在烧瓶里做这个。不明白我应该在 main.py 文件和 output.html 文件中写什么。

来自 sqlite 的表

Answer 1

您应该使用 HTML 和 JavaScript。

下面是我根据第一个下拉列表中选择的值在第二个下拉列表中填充值的代码。

您可以根据自己的需要对其进行自定义。

// Get first dropdown
let firstDropdown = document.getElementById('first_dropdown');

// When a value is selected in the first dropdown
firstDropdown.addEventListener('change', function() {

// Get value chosen by the user
let firstDropdownValue = firstDropdown.options[firstDropdown.selectedIndex].value;

if (firstDropdownValue == 'ab') {

  // Add the values in the second dropdown based on the value selected in the first dropdown
  let secondDropdown = document.getElementById('second_dropdown');
  let option_1 = document.createElement('option');
  option_1.value = 'a';
  option_1.innerHTML = 'a';
  secondDropdown.appendChild(option_1);

  let option_2 = document.createElement('option');
  option_2.value = 'b';
  option_2.innerHTML = 'b';
  secondDropdown.appendChild(option_2);
  }
});

// Get second dropdown
let secondDropdown = document.getElementById('second_dropdown');

// When a value is selected in the first dropdown
secondDropdown.addEventListener('change', function() {

// Get value chosen by the user
let secondDropdownValue = secondDropdown.options[secondDropdown.selectedIndex].value;

if (secondDropdownValue == 'a') {

  // Add the values in the second dropdown based on the value selected in the first dropdown
  let thirdDropdown = document.getElementById('third_dropdown');
  let option_1 = document.createElement('option');
  option_1.value = 'aa';
  option_1.innerHTML = 'aa';
  thirdDropdown.appendChild(option_1);

  let option_2 = document.createElement('option');
  option_2.value = 'aaa';
  option_2.innerHTML = 'aaa';
  thirdDropdown.appendChild(option_2);
  }
});

<label for="first_dropdown">First Dropdown</label><br>
<select id='first_dropdown'>
  <option value="" disabled selected>Choose</option>
  <option value="ab">ab</option>
</select>

<br>
<br>
<label for="second_dropdown">Second Dropdown</label><br>
<select id="second_dropdown">
  <option value="" disabled selected>Choose</option>
</select>

<br>
<br>

<label for="third_dropdown">Third Dropdown</label><br>
<select id="third_dropdown">
  <option value="" disabled selected>Choose</option>
</select>