Question

I have a series of select boxes whose content is dynamically defined, the options for the second box being populated depending upon the first selection and so on. The problem I have is that once I have (for example) selected options for the first two select boxes, and then want to start again changing the first selection, the displayed text for the second box remains as it was despite my resetting the options. If I dropdown the second select box the correct (updated) options are present. Example below – you can see that on any change event, I try to set option zero of children select boxes to equal “-” in an attempt to overwrite the historically selected text, but this does not seem to work.

How can I programatically update the displayed select text after resetting options?

   <form name="capacity">
<table>
<tr><td>Type:</td>
  <td><select onchange="onchange1();" id="type">
  <option value="-">-</option>
  <option value="Casing">Casing</option>
  <option value="Tubing">Tubing</option>
  </select></td></tr>

<tr><td>OD:</td>
    <td><select onchange="onchange2()" id="od">
    <option value="-">-</option>
    </select></td></tr>

<tr><td>Weight:</td>
  <td><select id="ppf">
    <option value="-">-</option>
      </select></td></tr></table>

and

    function onchange1() {

var type = (document.capacity.type.value);
var od = (document.capacity.od.value);
var ppf = (document.capacity.ppf.value);


document.capacity.od.options.length = 0
document.capacity.ppf.options.length = 0

document.capacity.od.options[0] = new Option("-", "-");
document.capacity.ppf.options[0] = new Option("-", "-");

if (type == "Tubing") {
    document.capacity.od.options[1] = new Option("1.05", 1.05)
    document.capacity.od.options[2] = new Option("1.315", 1.315)
    document.capacity.od.options[3] = new Option("1.66", 1.66)
}

if (type == "Casing") {
    document.capacity.od.options[1] = new Option("4.5", 4.5)
    document.capacity.od.options[2] = new Option("5", 5)
    document.capacity.od.options[3] = new Option("5.5", 5.5)
}

document.capacity.ppf.value = "-";
}

    function onchange2() {
    var type = (document.capacity.type.value);
    var od = (document.capacity.od.value);

document.capacity.ppf.options.length = 0
document.capacity.ppf.options[0] = new Option("-", "-")

if (type == "Tubing") {
    if (od == 1.05) {
        document.capacity.ppf.options[1] = new Option("1.14", 1.14)
        document.capacity.ppf.options[2] = new Option("1.2", 1.2)
        document.capacity.ppf.options[3] = new Option("1.54", 1.54)
    }
    if (od == 1.315) {
        document.capacity.ppf.options[1] = new Option("1.7", 1.7)
        document.capacity.ppf.options[2] = new Option("1.72", 1.72)
        document.capacity.ppf.options[3] = new Option("1.8", 1.8)
    }
    if (od == 1.66) {
        document.capacity.ppf.options[1] = new Option("2.1", 2.1)
        document.capacity.ppf.options[2] = new Option("2.3", 2.3)
        document.capacity.ppf.options[3] = new Option("2.33", 2.33)
    }
}

if (type == "Casing") {
    if (od == 4.5) {
        document.capacity.ppf.options[1] = new Option("9.5", 9.5)
        document.capacity.ppf.options[2] = new Option("10.5", 10.5)
        document.capacity.ppf.options[3] = new Option("11.6", 11.6)
    }
    if (od == 5) {
        document.capacity.ppf.options[1] = new Option("11.5", 11.5)
        document.capacity.ppf.options[2] = new Option("13", 13)
        document.capacity.ppf.options[3] = new Option("15", 15)
    }
    if (od == 5.5) {
        document.capacity.ppf.options[1] = new Option("14", 14)
        document.capacity.ppf.options[2] = new Option("15.5", 15.5)
        document.capacity.ppf.options[3] = new Option("17", 17)
    }
}

Answer 1

To set an option use something like:

// by index
my_select = document.getElementById("my_select_box");
my_select.selectedIndex = 0; // set first option

// by value
var value = "my_option";
for (var i = 0; i < my_select.options.length; i += 1) {
    if (my_select.options[i].value === value) {
        my_select.selectedIndex = i;
    }
}