Question

我完全不知道如何填充2＆lt;＆＃39; select＆gt;使用javascript的元素。关键是我有一个像这样的数组：

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来监听产品选择中的更改。

小心翼翼地做你需要的事is here。

以下是代码：

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();

javascript如何从ONE数组中填充相互依赖的<select> </select>

1 个答案: