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

Question

我有三个下拉菜单。我想要的是当我 select 两个下拉值时，它们的值将出现在第三个下拉列表中。我尝试了一些，但它不正确。

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

您不能向 select 添加值，您只能 change/add 值 of/to 选项。

我不知道您需要这个做什么，但是要更改第三个 select 中的给定选项，您需要更改它的 innerHTML。 innerHTML 将替换 <select id=...> 和 </select>.

之间的所有内容

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

而且这个功能很混乱，如果你能详细说明你到底需要这个做什么，你想要实现什么，那么提供帮助会更容易。

编辑：

我现在很清楚你想要什么，这里有一个可能的方法来做你在评论中要求的事情：

<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>

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

How to copy two dropdown value and get their selected value in another dropdown?

html

javascript

drop-down-menu

dropdown