如何复制两个下拉值并在另一个下拉列表中获取它们的选定值？

Question

我有三个下拉菜单。我想要的是当我选择两个下拉值时，它们的值将进入第三个下拉列表。我尝试了一些方法，但它不正确。

function copyDiv(){
      var size = document.getElementById('size');
      var color = document.getElementById('color');
      var data = document.getElementById('data');
      var amt = size.options[size.selectedIndex].value;
      var typ = data.options[data.selectedIndex].value;
      data.value += amt + typ;
    }
copyDiv();

<select id="size">
<option >S</option>
<option >M</option>
<option >L</option>
</select>
<select id="color">
<option>Grey</option>
<option>Red</option>
<option>White</option>
</select>
<br>
<select id="data">
<option>S / Grey</option>
<option>M / Grey</option>
<option>L / Grey</option>
<option>S / Red</option>
<optio>M / Red</option>
<option>L / Red</option>
<option>S / White</option>
<option>M / White</option>
<option>L / White</option>
</select>

Answer 1

您不能为选择添加值，您只能更改/添加选项的值。

我不知道你需要这个做什么，但要更改第三个选择中的给定选项，你需要更改它的 innerHTML。 innerHTML 将替换 <select id=...> 和 </select> 之间的所有内容。

如果您希望在每次选择时更新它，您需要将 onChange=copyDiv() 添加到前两个选择字段。

此外，该功能非常令人困惑，如果您提供有关您究竟需要什么以及想要实现什么的更多信息，那么提供帮助会更容易。

编辑：

我现在知道你想要什么，这里有一种可能的方式来做你在 cmets 中要求的：

<div>
        <select id="size" onChange="doJob()">
            <option>S</option>
            <option>M</option>
            <option>L</option>
        </select>
        <select id="color" onChange="doJob()">
            <option>Grey</option>
            <option>Red</option>
            <option>White</option>
        </select>
        <br>
        <select id="sizeColor">
            <option id="0">S / Grey</option>
            <option id="1">M / Grey</option>
            <option id="2">L / Grey</option>
            <option id="3">S / Red</option>
            <option id="4">M / Red</option>
            <option id="5">L / Red</option>
            <option id="6">S / White</option>
            <option id="7">M / White</option>
            <option id="8">L / White</option>
        </select>
</div>
<p id="test"></p>
 <script>
        function doJob() {
              var size = document.getElementById("size").value;
            var color = document.getElementById("color").value;
            
            if(size.length !== 0 && color.length !== 0) {
                var sizecolor = size + " / " + color;
                for(let i=0;i<9;i++) {
                    var combined = document.getElementById(i);
                    if(combined.value == sizecolor) {
                        combined.selected = "selected";
                    }
                    else {
                        combined.selected = "";
                    }
                }
            }
        }
</script>

Answer 2

您的问题不是很清楚，是否要将选定的值添加到第三个下拉列表中，或者您想在前两个下拉列表的基础上更改第三个下拉列表的选择。如果您的第三个下拉列表已经填充并且只想更改选择，请在下面快速找到代码。

 <div>
        <select id="size">
            <option></option>
            <option>S</option>
            <option>M</option>
            <option>L</option>
        </select>
        <select id="color">
            <option></option>
            <option>Grey</option>
            <option>Red</option>
            <option>White</option>
        </select>
        <br>
        <select id="data">
            <option>S / Grey</option>
            <option>M / Grey</option>
            <option>L / Grey</option>
            <option>S / Red</option>
            <option>M / Red</option>
            <option>L / Red</option>
            <option>S / White</option>
            <option>M / White</option>
            <option>L / White</option>
        </select>
    </div>

 <script>
        $(document).ready(function () {

            $("#size").change(function () {
                PopulateThirdDDL();
            });

            $("#color").change(function () {
                PopulateThirdDDL();
            });
        });
        function PopulateThirdDDL() {

            var size = $('#size').val();
            var color = $('#color').val();
            if (size != "" && color != "") {
                var itm = size + " / " + color;
                $('select[id="data"]').val(itm);
            }
        }

    </script>