Question

For example take a look at http://katz.cd/submit.php. Notice when you select a type, that type is carried through to all the other type dropdown menus.

How do I do this?

Answer 1

Here’s how they did it, taken straight from their HTML source:

function doal(){
    var se = document.getElementsByName("type[]");

    for (var i = 0; i < se.length; i++){
        se[i].value = document.getElementById("seX").value;
    }
}

Each drop down has the same name in their case, which is “type[]”. “seX” is their main drop down. getElementsByName() puts the found elements into the array which they’ve named “se”. This is all an onChange event. So say you had a main dropdown called “main” and others that “main” changed, let’s call them “others”. Your function could look like this:

function changeAll(){
    var toChange = document.getElementsByName("others");

    for (var i = 0; i < toChange.length; i++){
        toChange[i].value = document.getElementById("main").value;
    }
}

EDIT: Also, in case you don’t know onChange events, it would look something like this:

<select id="main" onChange="changeAll()">
  <option>Example</option>
</select>

<select id="others">
  <option>Example</option>
</select>