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> 

我很抱歉不beein更準確，但我的英語並不完美。

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