Question

我有几个选择

我想只显示来自此“sub”选择的用户选项，这些选项与第二个选择的值具有相同的类：

<select name="businesssubdomain" id="businesssubdomain">

<option class = "1" value="1">SD_APLIB</option>
<option class = "1" value="2">SD_FICOCO</option>
<option class = "1" value="3">SD_FICOFRAU</option>
<option class = "1" value="4">SD_FICOAM</option>
<option class = "1" value="5">SD_FICOPMR</option>
<option class = "1" value="6">SD_FICOPM</option>
<option class = "1" value="7">SD_FICORCT</option>
<option class = "2" value="8">SD_EDMCCLOE</option>
<option class = "2" value="9">SD_EDMCESO</option>
<option class = "3" value="10">SD_GEDDIAD</option>
<option class = "3" value="11">SD_GEDSCAN</option>
<option class = "3" value="12">SD_GEDSCOR</option>
...

<select name="businessdomain" id="businessdomain">

<option value="1">D_FICO</option>
<option value="2">D_EDMC</option>
<option value="3">D_GED</option>
...

例如，如果我在第二个选择中选择D_EDMC（值2），我应该只在第一个选择中显示SD_EDMCCLOE和SD_EDMCESO（第2类）。

我在Javascript方面的技能很少，我想用Dojo做。我该怎么办？

Answer 1

使用Dojo，您可以执行以下操作：

require(["dojo/query", "dojo/NodeList-dom", "dojo/NodeList-traverse", "dojo/domReady!"],   function(query) {
    var changeSubdomains = function(value) {
        query("#businesssubdomain option").style("display", "none");
        query("#businesssubdomain option." + value).style("display", "block").at(0).attr("selected", "selected");
    };

    query("#businessdomain").on("change", function(evt) {
        changeSubdomains(evt.target.value);
    });
});

这里发生的是我们将事件处理程序连接到change select的#businessdomain事件。然后，我们隐藏所有选项，并仅显示与所选选项的值具有相同类别名称的选项（根据要求）。

可以找到一个示例here。

使用带Dojo的第二个选择值过滤选择

1 个答案: