Javascript根据所选选项隐藏值

Question

I need help with some javascript. The idea is to hide some values from a depending on a parent

here is the 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>

Do you have any idea to make the javascript hide options with the id that doesnt match with the value of the option selected on the first select?

Thanks for helping !

Answer 1

You can do it like this:

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();
    }
}

You also have to add a data-phase attribute to your ssphases options so that you can link them together, like this:

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

I used jQuery for $().hide and $().show.

Here's a fiddle.