Question

我正在寻找一个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>

Answer 1

Option的可选参数如下

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

text（必填） - 页面上显示的值

值 - 值

defaultSelected - [true / false] - 这相当于添加   选择html标记上元素的属性。所以，如果你重置一个   表单，该值将保持选中状态。

selected - [true / false] - 选择option设置为true时的值

这只会创建一个像

这样的选项元素

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

要添加一个说hikeTypeId的选项，代码可以像

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

要清除所有上一个并添加新内容，可以使用[add(element[,index])]和remove(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;

更改可用的html选择选项

1 个答案: