如何用Javascript/jQuery为未选择的禁用默认选项select赋值BLANK

问题说明 #

需求：当下拉框（select）未选择任何选项时，页面提交自定义值"BLANK"；同时要求下拉框第一个选项为选中且禁用状态。目前存在禁用选项导致提交空值的问题，寻求解决办法。

现有代码 #

HTML部分

<form onsubmit="check()">
  <select id="test0">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="Bob">Bob</option>
  </select>
  <select id="test1">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="John">John</option>
  </select>
  <select id="test2">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="Alice">Alice</option>
  </select>
  <select id="test3">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="Ken">Ken</option>
  </select>
</form>

JavaScript部分

function check() {
  let a = '#test';
  var isEmpty = true;
  for (let i = 0; i < 4; i++) {

    var p = $(a + i).val();

    if (p != '') {
      isEmpty = false;
    }
  }
  if (isEmpty) {
    $('#test0').val('BLANK');
  }
};

解决方案 #

方案一：使用隐藏输入框处理提交值（推荐）

由于禁用的默认选项无法直接修改其值，我们可以用隐藏输入框承载实际提交内容，保留下拉框原有交互样式。

修改后的代码如下：

HTML

<form onsubmit="check()">
  <!-- 下拉框保留禁用默认选项，移除name属性避免提交空值 -->
  <select id="test0">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="Bob">Bob</option>
  </select>
  <!-- 对应隐藏输入框，用于提交实际值 -->
  <input type="hidden" name="test0" id="test0_hidden">

  <select id="test1">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="John">John</option>
  </select>
  <input type="hidden" name="test1" id="test1_hidden">

  <select id="test2">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="Alice">Alice</option>
  </select>
  <input type="hidden" name="test2" id="test2_hidden">

  <select id="test3">
    <option value="" selected="selected" disabled="disabled">Select</option>
    <option value="Ken">Ken</option>
  </select>
  <input type="hidden" name="test3" id="test3_hidden">
</form>

JavaScript

function check() {
  // 遍历每个下拉框，设置对应隐藏输入框的值
  for (let i = 0; i < 4; i++) {
    const select = $(`#test${i}`);
    const hiddenInput = $(`#test${i}_hidden`);
    const selectedValue = select.val();

    // 未选择有效选项时提交BLANK，否则提交选中值
    hiddenInput.val(selectedValue === '' ? 'BLANK' : selectedValue);
  }

  // 允许表单正常提交
  return true;
};

该方案既满足下拉框默认选项禁用且选中的要求，又能确保未选择时提交"BLANK"，避免空值问题。

方案二：仅当所有下拉框未选择时提交BLANK（匹配原代码逻辑）

如果需求是只有所有四个下拉框都未选择时才提交BLANK，可修改提交函数动态添加隐藏输入框：

function check() {
  let allEmpty = true;

  // 判断是否所有下拉框都未选择有效选项
  for (let i = 0; i < 4; i++) {
    if ($(`#test${i}`).val() !== '') {
      allEmpty = false;
      break;
    }
  }

  if (allEmpty) {
    // 为每个下拉框添加隐藏输入框，提交BLANK值
    for (let i = 0; i < 4; i++) {
      $('<input>').attr({
        type: 'hidden',
        name: `test${i}`,
        value: 'BLANK'
      }).appendTo('form');
    }
  }

  return true;
}

内容的提问来源于stack exchange，提问作者Jay T