在用户选择选项（HTML）后限制选项_Html_Css_Flask

在用户选择选项（HTML）后限制选项

html css flask

在用户选择选项（HTML）后限制选项,html,css,flask,Html,Css,Flask,到目前为止，对于HTML格式的表单，我有两个选项列表可供选择。但是，在一个列表中选择一个值将使第二个列表中的某些选项不可能。具体而言，第一个列表是可能单位（厘米、英寸、英尺）的列表，而第二个列表是位置的列表。选择一个单元将限制可能拥有该单元的位置的数量。同样，选择国家/地区值将限制可用的单位数量。在用户选择位置或单元后，是否可能以任何方式限制用户可用的选择 Unit: <br> <select name="unit_input"> <br> &

到目前为止，对于HTML格式的表单，我有两个选项列表可供选择。但是，在一个列表中选择一个值将使第二个列表中的某些选项不可能。具体而言，第一个列表是可能单位（厘米、英寸、英尺）的列表，而第二个列表是位置的列表。选择一个单元将限制可能拥有该单元的位置的数量。同样，选择国家/地区值将限制可用的单位数量。在用户选择位置或单元后，是否可能以任何方式限制用户可用的选择

Unit:
<br>
<select name="unit_input">
    <br>
    <option selected disabled hidden></option>
    <option value="l">League</option>
    <option value="m">Mile</option>
    <option value="ft">Foot</option>
    <option value='m'>Meter</option>
    <option value="st">Stage</option>
    <option value="km">Kilometer</option>
</select>
<br>

Location:
<br>
<select name="nationality_input">
    <br>
    <option selected disabled hidden></option>
    <option value="italian">Italian</option>
    <option value="german">German</option>
    <option value="french">French</option>
    <option value="hungarian">Hungarian</option>
    <option value="british">British</option>
    <option value="swiss">Swiss</option>
    <option value="spanish">Spanish</option>
</select>
<br>
<br>

单位：




联盟
英里
脚
米
阶段
公里


地点：




意大利人
德国的
法语
匈牙利语
英国的
瑞士的
西班牙的

是，使用JavaScript：

（不要忘记将ID添加到下拉列表中，以便代码正常工作）


单位：




联盟
英里
脚
米
阶段
公里






地点：




意大利人
德国的
法语
匈牙利语
英国的
瑞士的
西班牙的




函数限制dropdownlists（）{
var unit=document.getElementById（“单位输入”）；
var nationalty=document.getElementById（“国籍输入”）；
开关（单位值）{
案例“m”：
//要隐藏的选项：
nationalty.options[1].style.display=“无”//意大利语
//等等。
//要显示的选项：
nationalty.options[4].style.display=“”；//英国
//等等。
打破
//等等。
}
开关（国家值）{
“英国”案：
//要隐藏的选项：
unit.options[6].style.display=“无”//公里
//等等。
//要显示的选项：
unit.options[1].style.display=“”；//联盟
//等等。
//等等。
}
}
//同时限制页面加载：
限制下拉列表（）；

从理论上讲，您应该能够使用纯CSS实现这一点，例如：

#第二个选项{显示：无；}
#第一个：has（>option#a:checked）~#第二个选项.a{display:block；}
#第一个：has（>option#b:checked）~#第二个option.b{display:block；}
#第一个：has（>option#c:checked）~#第二个option.c{display:block；}


A.
B
C
显示所有选项
选择某个选项时显示
选择c时显示

这是可能的，是的。您可以使用JavaScript调整HTML，挂接到

更改

事件来测试一个

中的选定值，以在下一个

中显示/隐藏

s。

<!doctype html>
<html>
    <head>
    </head>
    <body>
        Unit:
        <br>
        <select id="unit_input" name="unit_input" onchange="restrictDropDownLists()">
            <br>
            <option selected disabled hidden></option>
            <option value="l">League</option>
            <option value="m">Mile</option>
            <option value="ft">Foot</option>
            <option value='m'>Meter</option>
            <option value="st">Stage</option>
            <option value="km">Kilometer</option>
        </select>
        <br>
        <br>
        <br>

        Location:
        <br>
        <select id="nationality_input" name="nationality_input" onchange="restrictDropDownLists()">
            <br>
            <option selected disabled hidden></option>
            <option value="italian">Italian</option>
            <option value="german">German</option>
            <option value="french">French</option>
            <option value="hungarian">Hungarian</option>
            <option value="british">British</option>
            <option value="swiss">Swiss</option>
            <option value="spanish">Spanish</option>
        </select>
        <br>
        <br>
        <script type="text/javascript">
            function restrictDropDownLists(){
                var unit = document.getElementById("unit_input");
                var nationalilty = document.getElementById("nationality_input");

                switch(unit.value){
                    case "m":
                        // Options to hide:
                        nationalilty.options[1].style.display = "none"; // Italian
                        // etc.
                        // Options to show:
                        nationalilty.options[4].style.display = ""; // British
                        // etc.
                        break;
                    // etc.
                }

                switch(nationalilty.value){
                    case "british":
                        // Options to hide:
                        unit.options[6].style.display = "none"; // Kilometer
                        // etc.
                        // Options to show:
                        unit.options[1].style.display = ""; // League
                        // etc.
                    // etc.
                }
            }

            // Restrict on the page load as well:
            restrictDropDownLists();
        </script>
    </body>
</html>