0

我正在寻找一种 javascript 解决方案来更改可用的 html 选择选项。我在正确的位置触发了一个 javascript 函数，但我不知道如何更改可用选项。例如，如果在 htmlselect1 中选择了选项 A，我希望更新 htmlselect2 中的选项。谢谢。

我所拥有的似乎几乎可以工作，但它在选择选项中也有空的选择。这是javascript函数。

function setDurationChoices(){
    var selectedType= hikeTypeID.value;
    if(selectedType=== "G"){
        document.inputForm.duration.options = new Option("3", "5", true);
    }
    else if(selectedType=== "H"){
        document.inputForm.duration.options = new Option("2", "3", "4", true);
    }
    else if(selectedType=== "B"){
        document.inputForm.duration.options = new Option("5", "7", true);
    }
}

这是触发的地方：

<select id="hikeTypeID" name="hikeType" onchange="setDurationChoices()">
   <option value="G">G</option>
   <option value="H">H/option>
   <option value="B">B</option>
</select>

这是我要动态更改的选择：

<select name="duration">
   <option value="3">3</option>
   <option value="5">5</option>
</select>
4

1 回答 1

1

Option的可选参数如下

new Option([text[, value[, defaultSelected[, selected]]]])

文本（必需） - 页面上显示的值

价值 - 价值

defaultSelected - [true/false] - 这相当于将 selected 属性添加到 html 标记上的元素。因此，如果您重置表单，该值将保持选中状态。

选择 - [true/fals] - 选择该值设置为true时选择值

这只会创建一个选项元素，例如

<option value="G">G</option>

要添加一个选项来表示hikingTypeId，代码可以是

document.getElementById('hikeTypeId').options.add(new Option("g","g",false,false));

要刷新所有以前的内容并添加新内容，可以使用[add(element[,index])]andremove(index)

while(document.getElementById('hikeTypeId').options.length)
    document.getElementById('hikeTypeId').options.remove(0);

document.getElementById('hikeTypeId').options.add(new Option("g","g",false,false), 0); 
document.getElementById('hikeTypeId').options.add(new Option("h","h",false,false), 1); 
document.getElementById('hikeTypeId').options.add(new Option("i","i",false,true), 2);

如果这令人困惑，您也可以相应地使用document.createElement('option')和设置属性。

var option = document.createElement('option');
option.text = text;
option.value = value; 
option.selected = true;
于 2013-07-14T21:26:41.647 回答