如何为<select><option>赋值以显示对应命名图片及处理下拉选项

DevOps 小满

2026-7-7

配置器序列号生成与<option>赋值问题

我正在开发一个配置器，需要基于选项值生成序列号来显示指定图片。此前在根据标签值/图片名称隐藏部分<select>选项时遇到困难，目前已实现选项的显示与隐藏，但不清楚如何为<option>赋值。其中尺寸值可直接使用，而类型（如Stahl、Poly等）需转换为对应的字母（如F、B、A等）。

现有代码

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="buttonrow">
  <div class="Gewinde">
    <h4> Fußteller Art: </h4>
    <select name="teller2" id="teller2" onchange="dropdownTeller2(this)">
      <option value="0"></option>
    </select>
  </div>
</div>
<div class="buttonrow" id="durchmesser">
  <div class="Gewinde">
    <h4> Fußteller Größe: </h4>
    <select name="teller" id="teller" onchange="dropdownTeller(this)">
      <option value="0">Durchmesser (mm)</option>
    </select>
  </div>
</div>

CSS 代码

.buttonrow {
  display: flex;
  margin-bottom: 40px;
  margin-left: 100px;
}

.rightoption {
  margin-left: 100px;
}

.buttons {
  margin-top: 50px;
}

#test {
  width: 200px;
  height: 30px;
}

JavaScript 代码

let Laenge = 0;
let Teller = 0;
let KappeFarbe = 1;
let Teller2 = 0;
let GA = 0;
let GD = 0;
let VO = 0;
let VU = 0;

function dropdownTeller(element) {
  Teller = element.value;
  if (GA != 0 && GD != 0) {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + GA + GD + VO + VU + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + GA + GD + VO + VU + ".png)";
    }
  } else {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + ".png)";
    }
  }
}

function dropdownTeller2(element) {
  Teller2 = element.value;
  document.getElementById("durchmesser").style.visibility = "visible"
  if (GA != 0 && GD != 0) {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + GA + GD + VO + VU + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + GA + GD + VO + VU + ".png)";
    }
  } else {
    if (KappeFarbe = 1) {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + ".png)";
    } else {
      document.getElementById("image").style.backgroundImage = "url(konfig/" + Teller2 + Teller + KappeFarbe + ".png)";
    }
    const FVal = new Array("19", "20", "30");
  }
}

/* jQuery TEST */
var subjectObject = {
  "Stahlteller": [
    "19",
    "20",
    "30",
    "33",
    "35",
    "40",
    "45",
    "50",
    "60"
  ],
  "Stahlteller abgeschnitten": [
    "40/35",
    "40/30"
  ],
  "Stahlteller abgeschnitten mit 2 Anschraublöchern": [
    "40/35",
    "40/30"
  ],
  "Stahlteller mit 2 Anschraublöchern": [
    "30",
    "40",
    "45",
    "50",
    "60"
  ],
  "Stahlteller mit 3 Anschraublöchern": [
    "45"
  ],
  "Stahlteller mit 4 Anschraublöchern": [
    "80"
  ],
  "Stahlteller gewölbt": [
    "40"
  ],
  "Edelstahlteller": [
    "25",
    "30",
    "36",
    "40",
    "50",
    "60",
    "70",
    "75"
  ],
  "Edelstahlgelenkteller": [
    "60",
    "70"
  ],
  "Edelstahlteller STABIL": [
    "50"
  ],
  "Polyamidteller": [
    "20",
    "30",
    "36",
    "48",
    "50"
  ]
}

window.onload = function() {
  var subjectSel = document.getElementById("teller2");
  var topicSel = document.getElementById("teller");

  for (var x in subjectObject) {
    subjectSel.appendChild(new Option(x, x));
  }
  subjectSel.onchange = function() { //empty Chapters- and Topics- dropdowns

    //subjectSel.length = 1;   
    topicSel.length = 1;
    //display correct values
    for (var y in subjectObject[this.value]) {
      topicSel.appendChild(new Option(subjectObject[this.value][y], y));
    }
  }

}

解决方案

1. 创建类型到字母的映射表

定义一个映射对象，将类型名称转换为对应的序列号字母：

const typeMapping = {
  "Stahlteller": "F",
  "Stahlteller abgeschnitten": "F",
  "Stahlteller abgeschnitten mit 2 Anschraublöchern": "F",
  "Stahlteller mit 2 Anschraublöchern": "F",
  "Stahlteller mit 3 Anschraublöchern": "F",
  "Stahlteller mit 4 Anschraublöchern": "F",
  "Stahlteller gewölbt": "F",
  "Edelstahlteller": "B",
  "Edelstahlgelenkteller": "B",
  "Edelstahlteller STABIL": "B",
  "Polyamidteller": "A"
};

可根据实际需求调整字母对应关系。

2. 修正`<option>`赋值逻辑

为#teller2的选项设置映射后的字母作为value
为#teller的选项设置实际尺寸值作为value（原代码错误使用了数组索引）

修改window.onload中的代码：

window.onload = function() {
  var subjectSel = document.getElementById("teller2");
  var topicSel = document.getElementById("teller");

  for (var x in subjectObject) {
    // 使用映射后的字母作为选项value
    subjectSel.appendChild(new Option(x, typeMapping[x] || x));
  }
  subjectSel.onchange = function() {
    topicSel.length = 1;
    // 遍历尺寸列表，将尺寸值设为选项value
    subjectObject[this.value].forEach(size => {
      topicSel.appendChild(new Option(size, size));
    });
  }
}

3. 修复逻辑错误

原代码中存在**用赋值运算符=代替比较运算符===**的错误，会导致KappeFarbe被意外修改，需全部替换为严格相等判断：

// 错误写法
if (KappeFarbe = 1) 

// 正确写法
if (KappeFarbe === 1)

4. 优化序列号拼接逻辑

封装函数生成图片路径，避免重复代码：

function generateImagePath() {
  let parts = [Teller2, Teller];
  if (KappeFarbe !== 1) {
    parts.push(KappeFarbe);
  }
  if (GA !== 0 && GD !== 0) {
    parts.push(GA, GD, VO, VU);
  }
  return `url(konfig/${parts.join('')}.png)`;
}

// 在dropdownTeller和dropdownTeller2中调用
document.getElementById("image").style.backgroundImage = generateImagePath();

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