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

如何更改选择显示的文字？

1 个答案: