изменить доступный html опции выбора

Question

Я ищу решение по javascript для изменения доступных вариантов выбора html. У меня есть функция javascript, которая запускается в правильной точке, но я не могу понять, как изменить доступные параметры. Например, если параметр A выбран в htmlselect1, я хочу обновить параметры в 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

Необязательные параметры для варианта являются следующие

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

текст (обязательно) - значение, показанное на стр значение

- значение

defaultSelected - [истина/лжи] - это equivilavnt добавления выбранного атрибута элемента на HTML теге. Поэтому, если вы сбросите форму , значение останется неизменным.

выбрано - [истина/ложь] - выбирает значение, когда опция установлена ​​истина

Это создает только один вариант элемента, как

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