将表单的输入字段值限制为仅选项答案

【问题标题】：Restrict the input field value of a form to options only将表单的输入字段值限制为仅选项
【发布时间】：2021-12-28 06:12:56
【问题描述】：

我正在使用表单将值插入数据库。我希望 stationerytype 字段仅插入选项值。我的代码允许用户插入键入的值。我不想插入这个键入的值。该选项有两个数据列表，数据列表的值取决于在“目的”字段中选择的值。我的代码是

<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
<option></option>
<option value="Meeting">Meeting</option>
<option value="Departmental">Departmental</option>
</select>
</div>
<script>
  function random() {
    document.querySelector('[name="stationerytype[]"]').value = ""
    var a = document.getElementById('purpose').value;
    if (a === "Meeting") {
      var datalist = "datalist1";
    } else if (a === "Departmental") {
      var datalist = "datalist2";
    }
    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)
  }
</script>
<td><input type="text" name="stationerytype[]" id="stationerytype" class="form-control" autocomplete="off" required>
  <datalist id="datalist1">
    <option value=""></option>
    <option value="MEETING PEN">MEETING PEN</option>
    <option value="NOTEPAD">NOTEPAD</option>
    <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
  </datalist>

  <datalist id="datalist2">
    <option value=""></option>
    <option value="A4 GREEN REAM">A4 GREEN REAM</option>
    <option value="A4 WHITE REAM">A4 WHITE REAM</option>
    <option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
  </datalist>
</td>

【问题讨论】：

标签： html

【解决方案1】：

参考this 帖子，您必须设置输入的pattern 属性。如果已设置模式，如果用户选择数据列表中的值以外的任何其他选项，输入将无效。

如果输入无效，您可以在更改事件时清除输入的值。

工作小提琴

function random() {
  const input = document.querySelector('[name="stationerytype[]"]');
  input.value = ""
  var a = document.getElementById('purpose').value;
  if (a === "Meeting") {
    var datalist = "datalist1";
  } else if (a === "Departmental") {
    var datalist = "datalist2";
  }
  const options = Array.from(document.getElementById(datalist).options).map(option => option.value);
  input.setAttribute("list", datalist);
  input.setAttribute("pattern", options.join('|'));
}
function ondataListSelect() {
  const input = document.getElementById('stationerytype');
  if (!input.validity.valid) {
    input.value = '';
  }
}

<select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required >
  <option></option>
  <option value="Meeting">Meeting</option>
  <option value="Departmental">Departmental</option>
</select>
  
<td>
  <input type="text"
    name="stationerytype[]"
    id="stationerytype"
    class="form-control"
    onchange="ondataListSelect()"
    autocomplete="off"
    required>
  <datalist id="datalist1">
    <option value=""></option>
    <option value="MEETING PEN">MEETING PEN</option>
    <option value="NOTEPAD">NOTEPAD</option>
    <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
  </datalist>

  <datalist id="datalist2">
    <option value=""></option>
    <option value="A4 GREEN REAM">A4 GREEN REAM</option>
    <option value="A4 WHITE REAM">A4 WHITE REAM</option>
    <option value="CELLOTAPE(BROWN)">CELLOTAPE(BROWN)</option>
  </datalist>
</td>

【讨论】：