javascript how to populate interdependant <select> from ONE array

Question

I have absolutely no idea about how to populate 2 <'select> elements using javascript. The point is that I have an array like this one :

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

the js to do this : populate first field like this :

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

And the second select field should be populating when choosing first to populate like this :

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

I apologize not to beein more accurate, but my english is not perfect.

You want the values of the second select to change when the selection is changed in the first one? Can you provide an example (as opposed to your half-example-half-explanation)? — Scott Hunter
– Scott Hunter, Commented Dec 24, 2014 at 12:22
this would be a lot easier to answer if you represented your array in JS syntax instead of PHP... — Alnitak
– Alnitak, Commented Dec 24, 2014 at 12:24

dcoder · Accepted Answer · 2014-12-24 13:16:04Z

You should use the DOM elements' appendChild method for setting the values, and addEventListener to listen for changes in the product select.

A fiddle to do what you need is here.

Here's the code:

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

That works perfectly, thank you for the time you spent on it, and the explanations.

Collectives™ on Stack Overflow

javascript how to populate interdependant <select> from ONE array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related