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隐藏选项的id与第一次选择时所选选项的值不匹配

---

谢谢你的帮助

您可以这样做：

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

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

您还必须向ssphases选项添加数据阶段属性，以便将它们链接在一起，如下所示：

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

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

我将jQuery用于$.hide和$.show

---

这里有一个问题。

在选择中隐藏选项不是一个好主意，因为会出现浏览器兼容性问题。最好的方法是使用javascript动态删除/添加选项。有多种方法可以实现这一点：例如，保留一个所有选择选项的列表，并使用JSdoes输出符合条件的选项，这正是我想要做的。非常感谢。