如何更改选择文本显示？

Question

我有一系列的选择框，其内容是动态定义的，第二个选项框的选项取决于第一个选择等等。我遇到的问题是，一旦我为（例如）前两个选择框选择了选项，然后想要再次开始更改第一个选择，第二个框的显示文本保持原样，尽管我重置了选项。如果我下拉第二个选择框，则显示正确的（更新的）选项。下面的示例 - 您可以看到，在任何更改事件中，我尝试将子选择框的选项零设置为等于“ - ”，以尝试覆盖历史选定的文本，但这似乎不起作用。

如何在重置选​​项后以编程方式更新显示的选择文本？

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

和

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

要设置一个选项，使用这样的：

// 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; 
    } 
}