如何通过Javascript从两个select/option 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按名称轻松地获得select输入的句柄

var select1 = $("#my_select1");

现在你的问题是你不想要这个值。这很容易。相反，您希望使用select选项，然后希望获取id。您可以按如下方式执行此操作

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

Answer 2

非常感谢您的支持。干杯，乔治

最后，我使用了这段代码(并且坚持使用onchange，因为我不想要另一个按钮，因为已经有三个按钮了)：

<script>

    var selection01, selection02;

    showOptions1 = function(s) {

        selection01 = "<img src='img/preview/" + s[ s.selectedIndex ].id;

        getResult();


    };

    showOptions2 = function(s) {

        selection02 = s[ s.selectedIndex ].id + ".jpg' width='200px;'>";

        getResult();

    };

    function getResult() {

        var total = selection01 + selection02;

        console.log( total );

        document.getElementById("Image").innerHTML = total;

    };

</script>

<select id="select1" onchange="showOptions1(this)">
    <option value="" id="01" selected>...</option>
    <option value="werta" id="10">Text Item 1a</option>
    <option value="wertb" id="20">Text Item 1b</option>
</select>

<select id="select2" onchange="showOptions2(this)">
    <option value="" id="02" selected>...</option>
    <option value="wertc" id="30">Text Item 1c</option>
    <option value="wertd" id="40">Text Item 1d</option>
</select>

<hr><span id="Image"></span>