Svelte禁用Select组件提交时值未绑定问题求助

问题原因 #

HTML规范明确规定：带有disabled属性的表单控件，其值不会被包含在表单提交的数据中，这就是禁用后字段值为null的核心原因。

解决方案 #

方法1：用隐藏输入框同步值（推荐） #

保留禁用的select用于展示，同时添加一个隐藏的input元素绑定data的值，让表单提交时传递这个隐藏字段的内容。

修改后的代码示例：

<script>
export let data;
export let name;
export let required;
export let disabled;

let options = [];

onMount(async () => { 
  options = await buildOptionsList();
});

async function buildOptionsList () {
  let rv = [];
  try {
    let req = await fetch(....)
    req.data.forEach(item => {
      rv.push({ // 修正原代码笔误：list改为rv
        value: item.value,
        text: item.text
      });
    });
  } catch (e) {
    ...
  }
  return rv;
}
</script>

<!-- 禁用的select仅用于展示，name设为非目标名称避免冲突 -->
<select class="form-control" {required} {disabled} name="dummy-{name}" id="{name}" 
    bind:value={data}>
    {#each options as option}
      <option value={option.value}>{option.text}</option>
    {/each}
</select>

<!-- 仅在禁用状态下添加隐藏输入框，传递真实值 -->
{#if disabled}
<input type="hidden" name="{name}" value="{data}" />
{/if}

方法2：模拟禁用状态而非使用disabled属性 #

由于<select>原生不支持readonly，可以通过CSS样式+事件阻止来模拟禁用效果，让控件保持可提交状态：

<script>
export let data;
export let name;
export let required;
export let disabled;

let options = [];

onMount(async () => { 
  options = await buildOptionsList();
});

async function buildOptionsList () {
  let rv = [];
  try {
    let req = await fetch(....)
    req.data.forEach(item => {
      rv.push({
        value: item.value,
        text: item.text
      });
    });
  } catch (e) {
    ...
  }
  return rv;
}

// 阻止键盘操作修改选择
function preventKeydown(e) {
  if (disabled) e.preventDefault();
}
</script>

<select 
  class="form-control {disabled ? 'disabled-style' : ''}" 
  {required} 
  name="{name}" 
  id="{name}" 
  bind:value={data}
  on:keydown={preventKeydown}
  on:mousedown={(e) => disabled && e.preventDefault()}
>
    {#each options as option}
      <option value={option.value}>{option.text}</option>
    {/each}
</select>

<style>
.disabled-style {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #eee;
}
</style>

方案对比 #

• 方法1符合HTML规范，兼容性好，无需处理复杂交互细节，是更稳妥的选择。
• 方法2需要覆盖所有可能的用户操作（键盘、鼠标），否则存在用户修改选择的风险，适合对交互体验有特殊要求的场景。

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