Javascript скрыть значения в зависимости от выбранной опции

Question

Javascript скрыть значения в зависимости от выбранной опции

Мне нужна помощь с некоторым JavaScript. Идея состоит в том, чтобы скрыть некоторые значения в зависимости от родителя

вот HTML

<div class="form-group" style="margin-top: 20px;">
<label for="inputPassword3" class="col-sm-2 control-label">Phase</label>
<div class="col-sm-10">
<select class="form-control" name="phase" id="phase">
{%if phases is defined%}
{%for phase in phases%}
<option  value="{{phase.id}}">{{phase.nom}}</option>
{%endfor%}
{%endif%}
</select>
</div>
</div>
<div class="form-group" >
<label for="inputPassword3" class="col-sm-2 control-label">Sous phase</label>
<div class="col-sm-10">
<select class="form-control" name="ssphase" id="ssphase">
{%if ssphases is defined%}
{%for ssphase in ssphases%}
<option  value="{{ssphase.id}}" id="{{ssphase.phaseid}}">{{ssphase.nom}}</option>
{%endfor%}
{%endif%}
</select>
</div>
</div>

Есть ли у вас идея сделать параметры скрытия JavaScript с идентификатором, который не совпадает со значением параметра, выбранного при первом выборе?

Спасибо за помощь !

-3

html javascript php twig

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете сделать это так:

phase.onchange = function () {
show_sphases (this.value);
}

function show_sphases (phase) {
var subphases = document.querySelectorAll("[data-phase='" + phase + "']");
var allSubphases = document.querySelectorAll("#ssphase option");

for (var i = 0; i <= allSubphases.length; i++ ){
var item = allSubphases.item(i);
$(item).hide();
}

for (var i = 0; i <= subphases.length; i++ ){
var item = subphases.item(i);
$(item).show();
}
}

Вы также должны добавить атрибут фазы данных к вашим опциям ssphases, чтобы вы могли связать их вместе, например так:

<option  value="11" id="11" data-phase="1">Subphase #1-1</option>

Я использовал JQuery для $().hide а также $().show,

Вот играть на скрипке.

0