如果未从下拉列表中选择列表中的任何选项，则禁用提交按钮

Question

我正在尝试将

submit

按钮与

option

列表链接起来。如果从下拉列表中选择了两个列表的

item

列表中的任何一个

option

，则仅启用

submit

按钮。

示例 - 用户必须从类别 {ABC,DEF,GHI} 中选择一个选项，并从类别 {XYZ,MNO,PQR} 中选择一个选项，然后标签提交将激活。如果这两个选项中缺少一个，则标记提交

const dropdown1 = document.getElementById("dropdown");
const dropdown2 = document.getElementById("dropdown");
const submitbutton = document.getElementById("btn");

dropdown1.addEventListener("input", function() {
  submitbutton.disabled = dropdown1.value = dropdown2.value === "";
});

<form>
  <select id="dropdown1">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>

不会激活。

找到下面的代码。

尝试使用上面的代码，但没有发生。

Answer 1

更新您的 javascript 代码，代码中的 Condition 赋值不正确，getElementById 不正确。这是仅在选择两个下拉列表时才启用按钮的代码。

const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitbutton = document.getElementById("btn");

function checkDropdowns() {
    submitbutton.disabled = dropdown1.value === "" || dropdown2.value === "";
}

dropdown1.addEventListener("输入", checkDropdowns); dropdown2.addEventListener("输入", checkDropdowns);

Answer 2

代码有几个错误。以下是有关如何修复它的建议。

1. 向选择器添加了空选项。
2. 更改了 document.getElementById 中的 id
3. 使用 Array.prototype.forEach 向每个选择器添加事件侦听器。
4. 更改分配给按钮

   disabled

   属性的表达式。

const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");
const submitbutton = document.getElementById("btn");

[dropdown1, dropdown2].forEach(function(e) {
  e.addEventListener("input", function() {
    submitbutton.disabled = dropdown1[dropdown1.selectedIndex].text === "" || dropdown2[dropdown2.selectedIndex].text === "";
  });
});

<form>
  <select id="dropdown1">
    <option></option>
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
  </select>

  <select id="dropdown2">
    <option></option>
    <option>XYZ</option>
    <option>MNO</option>
    <option>PQR</option>
  </select>

  <input type="submit" id="btn" disabled>
</form>