根据是否显示需要 HTML 输入 [重复]

Question

我在表单上有一个部分，用户在其中标记状态，如果用户将状态标记为“已归档”，它将显示一个 div（使用 Javascript）并询问原因。如何使此框成为必需但仅在显示的情况下？例如，如果用户选择了另一个不是“已归档”的状态，则不需要该框。

选择状态

function admSelectCheck(nameSelect) {
  console.log(nameSelect);
  if (nameSelect) {
    admOptionValue = document.getElementById("admOption").value;
    if (admOptionValue == nameSelect.value) {
      document.getElementById("admDivCheck").style.display = "block";
    } else {
      document.getElementById("admDivCheck").style.display = "none";
    }
  } else {
    document.getElementById("admDivCheck").style.display = "none";
  }
}

<div class="input-field col s12 m6">
  <select name="fdstatus" onchange="admSelectCheck(this);">
    <option value="<?= $cst['cst_status']; ?>" selected>
      <?= $cst['cst_status']; ?>
    </option>
    <option value="Prospect">Prospect</option>
    <option value="Appointment Booked">Appointment Booked</option>
    <option value="Test Drive Booked">Test Drive Booked</option>
    <option value="Proposal Offered">Proposal Offered</option>
    <option id="admOption" value="Archived">Archived</option>
    <option value="Deal Won">Deal Won</option>
    <option value="Deal Lost">Deal Lost</option>
  </select>
  <label>Customer Status</label>
</div>
<!-- If 'Archive' show -->
<div id="admDivCheck" style="display:none;" class="row">
  <div class="input-field col s12 m6">
    <input name="fdstatusArchiveR" id="fdstatusArchiveR" type="text" class="validate">
    <label for="fdstatusArchiveR">Reason for archive</label>
  </div>

Answer 1

我在 div 中添加了一个隐藏类，在 select 中添加了一个 ID，并按照建议删除了内联事件处理程序。

脚本遵循 DRY 原则（不要重复自己）

document.getElementById("fdstatus").addEventListener("change", function() {
  const val = this.value; // select value
  const admOptionValue = document.getElementById("admOption").value; // option value of ID
  const show = val === admOptionValue; // boolean
  document.getElementById("admDivCheck").classList.toggle("hide", !show);
  document.getElementById("fdstatusArchiveR").required = show;
});

.hide {
  display: none;
}

<form>
  <div class="input-field col s12 m6">
    <select name="fdstatus" id="fdstatus">
      <option value="" selected>Please select</option>
      <option value="Prospect">Prospect</option>
      <option value="Appointment Booked">Appointment Booked</option>
      <option value="Test Drive Booked">Test Drive Booked</option>
      <option value="Proposal Offered">Proposal Offered</option>
      <option id="admOption" value="Archived">Archived</option>
      <option value="Deal Won">Deal Won</option>
      <option value="Deal Lost">Deal Lost</option>
    </select>
    <label>Customer Status</label>
  </div>
  <!-- If 'Archive' show -->
  <div id="admDivCheck" class="row hide">
    <div class="input-field col s12 m6">
      <input name="fdstatusArchiveR" id="fdstatusArchiveR" type="text" class="validate">
      <label for="fdstatusArchiveR">Reason for archive</label>
    </div>
  </div>
  <input type="submit" value="Test if required" />
</form>

Answer 2

在admSelectCheck 函数内切换输入上的required：

function admSelectCheck(nameSelect) {
  console.log(nameSelect);
  if (nameSelect) {
    admOptionValue = document.getElementById("admOption").value;
    if (admOptionValue == nameSelect.value) {
      document.getElementById("admDivCheck").style.display = "block";
      document.getElementById('fdstatusArchiveR').required = true;
    } else {
      document.getElementById("admDivCheck").style.display = "none";
      document.getElementById('fdstatusArchiveR').required = false;
    }
  } else {
    document.getElementById("admDivCheck").style.display = "none";
    document.getElementById('fdstatusArchiveR').required = false;
  }
}