更改可用的html選擇選項

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

文字（必填）-頁面上顯示的值

價值-價值

defaultSelected-[true / false]-這等同於將所選屬性添加到html標簽上的元素。 因此，如果您重置表單，該值將保持選中狀態。

selected-[true / false]-在option設置為true時選擇值

這只會創建一個選項元素，例如

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

要添加一個選項來聲明hierfTypeId，代碼可以像

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;