多选下拉框单选项含3个值时如何分别插入SQL对应字段

你当前的写法存在基础语法错误：HTML的<option>标签不支持同时设置多个value属性，浏览器只会读取最后一个value的值，导致你无法拿到另外两个属性的参数，所以需要先调整前端代码逻辑。

你用了v-model语法，说明是Vue项目，直接给<option>绑定对象类型的value即可：

<select
  class="multi-select" 
  multiple
  v-model="sprachen"
>
  <option 
    :value="{name: 'Arabic', level: 'Muttersprache', icon: 'https://bilder.pcwelt.de/4204696_620x310_r.jpg'}"
  >
    Arabisch
  </option>
  <option 
    :value="{name: 'Englisch', level: 'B1', icon: 'https://bilder.pcwelt.de/4204696_620x310_r.jpg'}"
  >
    Englisch
  </option>
</select>

调整后v-model绑定的sprachen变量会自动存储所有选中项的对象数组，每个元素都包含语言名称、等级、图标链接三个属性，不需要额外做DOM查询。

• 提交表单时直接把sprachen数组作为参数传给后端接口即可，如果需要选中时即时存储，也可以给select绑定@change事件监听选中变化，实时触发提交请求。
• 示例提交代码（Vue中使用axios）：

axios.post('/你的后端接口地址', {
  sprachenList: this.sprachen
}).then(res => {
  // 处理返回结果
})

所有后端语言的处理逻辑一致，这里以PHP为例：

1. 接收前端传过来的sprachenList数组
2. 遍历数组，把每一项的三个值对应插入数据库的三个字段即可

<?php
// 数据库连接代码省略
$sprachenList = json_decode(file_get_contents('php://input'), true)['sprachenList'];

foreach ($sprachenList as $item) {
    $name = $item['name'];
    $icon = $item['icon'];
    $level = $item['level'];
    // 用预处理SQL防止注入
    $stmt = $pdo->prepare("INSERT INTO 你的表名 (sprachename, spracheicon, sprachlevel) VALUES (?, ?, ?)");
    $stmt->execute([$name, $icon, $level]);
}
// 返回处理结果
?>

如果是更新用户已有的语言数据，可先删除该用户的旧语言记录再插入新数据，避免重复存储。

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