javascript - 如何通过 Javascript 从两个选择/选项 ID 构建图像名称/路径

Question

我正在尝试从两个选择字段构建图像路径。我必须使用“id”，因为“value”已被使用。不幸的是，只有第二个选择有效。有人有提示吗？正如你可能看到的，我不是一名编码员。有人能如此友善并帮助使代码更加优雅/简洁吗？ 当用户改变他的选择时，我总是使用 onchange 更新“result1”和“result2”。 提前致谢，乔治

这是我的代码:

<script>
  function showOptions1(s) {
  document.getElementById("result1").innerHTML = "<img src='img/preview/" + s[s.selectedIndex].id;
}
</script>
<script>
  function showOptions2(s) {
  document.getElementById("result2").innerHTML = s[s.selectedIndex].id + ".jpg'>";
}
</script>

<select  onchange="showOptions1(this)" id="my_select1">
   <option value="werta" id="1">Text Item 1a</option>
   <option value="wertb" id="2">Text Item 1b</option>
</select>

<select  onchange="showOptions2(this)" id="my_select2">
   <option value="wertc" id="3">Text Item 1c</option>
   <option value="wertd" id="4">Text Item 1d</option>
</select>

<span id="result1"></span><span id="result2"></span>

Answer 1

我不会使用 onchange 事件，因为您希望用户在构建路径之前选择两件事。因此，在屏幕上放置另一个按钮，称为“保存图像”或类似的按钮。该按钮的 onclick 获取每个选择输入的“值”并将它们连接在一起。您可以轻松地使用 jquery 按名称获取选择输入的句柄

var select1 = $("#my_select1");

现在你的问题是你不想要这个值。那很容易。相反，您需要选择选项，然后您想要获取 id。您可以按如下方式进行操作

var my1id = $("#my_select1 option:selected" ).id;