javascript 如何从一个<select>数组填充相互依赖

Question

我完全不知道如何使用javascript填充2个<'select>元素。关键是我有一个这样的数组：

Array (
  [0] => Array ([0] => 1 [1] => EQual One [2] => Array ( [0] => Array ( [0] => 1 [1] => 1.7 ) [1] => Array ( [0] => 3 [1] => 1.8 ) [2] => Array ( [0] => 4 [1] => 2.0 ) [3] => Array ( [0] => 5 [1] => 2.1 ) [4] => Array ( [0] => 6 [1] => 2.2 ) ) ) 
  [1] => Array ( [0] => 2 [1] => NGT [2] => Array ( [0] => Array ( [0] => 1 [1] => 1.7 ) [1] => Array ( [0] => 3 [1] => 1.8 ) [2] => Array ( [0] => 4 [1] => 2.0 ) [3] => Array ( [0] => 5 [1] => 2.1 ) [4] => Array ( [0] => 6 [1] => 2.2 ) ) ) 
  [2] => Array ( [0] => 3 [1] => Service [2] => Array ( [0] => Array ( [0] => 1 [1] => 1.7 ) [1] => Array ( [0] => 3 [1] => 1.8 ) [2] => Array ( [0] => 4 [1] => 2.0 ) [3] => Array ( [0] => 5 [1] => 2.1 ) [4] => Array ( [0] => 6 [1] => 2.2 ) ) ) 
  [3] => Array ( [0] => 4 [1] => V3D [2] => Array ( [0] => Array ( [0] => 1 [1] => 1.7 ) [1] => Array ( [0] => 3 [1] => 1.8 ) [2] => Array ( [0] => 4 [1] => 2.0 ) [3] => Array ( [0] => 5 [1] => 2.1 ) [4] => Array ( [0] => 6 [1] => 2.2 ) ) ) 
)

JS来做到这一点：像这样填充第一个字段：

<select required class="form-control" name="product" id="product" onchange="some action()">
<option value="1">EQualeOne</option>
<option value="2">NGT</option>
<option value="3">Service</option>
<option value="4">V3D</option>
</select>

选择第一个选择字段

时，应该填充第二个选择字段，如下所示：

<select required class="form-control" name="product" id="version" >
    <option value="value 1 of the array in the array you selected with the select before">XX</option>
    <option value="value 2 of the array in the array you selected with the select before">XX'</option>
    ...
    <option value="value X of the array in the array you selected with the select before">XX''</option>
    </select>

很抱歉没有更准确，但我的英语并不完美。

Answer 1

您应该使用 DOM 元素的 appendChild 方法来设置值，并使用 addEventListener 来侦听产品选择中的更改。

做你需要的小提琴就在这里。

代码如下：

var optionValues = Array (
    Array(1, "EQual One", Array (Array(1, 1.7), Array(3, 1.8), Array(4, 2.0), Array(5, 2.1), Array(6, 2.2))),
    Array(2, "NGT", Array(Array(1, 1.7), Array(3, 1.8), Array(4, 2.0), Array(5, 2.1), Array(6, 2.2))),
    Array(3, "Service", Array(Array(1, 1.7), Array(3, 1.8), Array(4, 2.0), Array(5, 2.1), Array(6, 2.2))),
    Array(4, "V3D", Array(Array(1, 1.7), Array(3, 1.8), Array(4, 2.0), Array(5, 2.1), Array(6, 2.2)))
);
function setSelect(selectElement, arr) {
    // Remove all previous values from the select
    while(selectElement.firstChild) {
        selectElement.removeChild(selectElement.firstChild);
    }
    // Go over all the options in the array and place them inside the select.
    for (var i=0; i<arr.length; ++i) {
            var optionValue = arr[i][0];
            var optionText = arr[i][1]
            // Initialize the option to be added
            var optionElement = document.createElement('option');
            optionElement.value = optionValue;
            optionElement.title = optionText; // In case we shorten the text to fit into the select
            optionElement.innerText = optionText;
            selectElement.appendChild(optionElement);
        }
}
function setVersion() {
    var selectedProductIndex = document.getElementById("product").value - 1;
    var versionsArray = optionValues[selectedProductIndex][2];
    var versionSelect = document.getElementById("version");
    setSelect(versionSelect, versionsArray);
}
function setProduct() {
    var productSelect = document.getElementById("product");
    setSelect(productSelect, optionValues);
    // Call setVersion once manually to set values in the "version" select.
    setVersion();
    // Add a listener on the select element, to update the version options on each product change.
    productSelect.addEventListener("change", setVersion)
}
setProduct();