用户选择选项(HTML)后的限制选项

问题描述 投票:0回答:1

截至目前,我有两个选项列表供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>
html css flask
1个回答
0
投票

是,使用JavaScript:https://codepen.io/dpamonty/pen/PoqRZQd

((不要忘记将ID添加到您的下拉列表中,代码才能正常工作。)

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.