Question

我想当有人从我的列表中选择一个国家/地区时，该国家/地区的省份会显示在第二个选择栏中，这可能在html中吗？如果不是我如何使用javascript。

<!DOCTYPE html>
<html>
<head>
    <title>Gegevens</title>
</head>
<body>
    <center>
        <h1>Gegevens</h1>
    </center>
    Land:
            <select id="countries">
                <option value="Holland">Holland</option>
                <option value="Denmark">Denmark</option>
                <option value="England">England</option>
                <option value="Spain">Spain</option>
                <option value="Italy">Italy</option>
            </select><br>
    Provincie:
            <select> OPTIONS FOR HOLLAND
                <option value="Gelderland">Gelderland</option>
                <option value="Utrecht">Utrecht</option>
            </select>
            <select> OPTIONS FOR ENGLAND ETC...
                 <option value="Schotland">Schotland</option>
                 <option value="Wales">Wales</option>
            </select>
    <footer><a href="SE.html">Ga  terug</a></footer>
</body>
</html>

Answer 1

您可能必须使用JavaScript执行此操作。我对您的HTML进行了一些编辑，以便更轻松地完成选择过程。 HTML表单元素可能有一种方法，但试试这个：

＆＃13;

var countrySelect = document.getElementById('countries'); //the main select
var countryClass = document.getElementsByClassName('country'); //the other selects

countrySelect.onchange = function(){
    var selected = this.children[this.selectedIndex].value; //this is the value of the country select;
    for(var i = 0; i < countryClass.length; i++)
      countryClass[i].style.display = countryClass[i].id === selected ? 'block' : 'none';
}

＆＃13;

<body>
    <center>
        <h1>Gegevens</h1>
    </center>
    Land:
            <select id="countries">
                <option disabled selected>Select Country</option>
                <option value="Holland">Holland</option>
                <option value="Denmark">Denmark</option>
                <option value="England">England</option>
                <option value="Spain">Spain</option>
                <option value="Italy">Italy</option>
            </select><br>
    Provincie:
            <select class="country" id="Holland" style="display:none;">
                <option disabled selected>Select Location</option>
                <option value="Gelderland">Gelderland</option>
                <option value="Utrecht">Utrecht</option>
            </select>
            <select class="country" id="England" style="display:none;">
                 <option disabled selected>Select Location</option>
                 <option value="Schotland">Schotland</option>
                 <option value="Wales">Wales</option>
            </select>
</body>

＆＃13;

Answer 2

我不确定html方式，但jquery方式非常简单。

从countries中选择的处理选项。根据国家选择的hide / show provinces：

$(document).ready(function(){
   $('#countries').on('change',function(){
      var selectedCountry = $(this).find('option:selected').text();

      switch (selectedCountry){
         case 'Holland':
           // hide show provice
           break;
         //etc

      }
    });
});

Answer 3

您需要使用JS并使用元素display属性。

用户选择国家/地区隐藏省选择后（下面的代码段隐藏所有选择共享toggle类），然后确定选择了哪个国家/地区并显示该国家/地区的省选择。瞧！

<!DOCTYPE html>
<html>
<head>
    <title>Gegevens</title>
</head>
<body>
    <center>
        <h1>Gegevens</h1>
    </center>
    Land:
    <select id="countrySelect" onchange="toggleCountry()">
        <option value="Holland">Holland</option>
        <option value="England">England</option>
    </select><br>
    Provincie:
    <select id="provinceHolland" class="toggle">
        <option value="Gelderland">Gelderland</option>
        <option value="Utrecht">Utrecht</option>
    </select>
    <select id="provinceEngland" class="toggle" style="display:none">
         <option value="Schotland">Schotland</option>
         <option value="Wales">Wales</option>
    </select>
    <footer><a href="SE.html">Ga  terug</a></footer>
    <script>
    function toggleCountry() {
        var list = document.getElementsByClassName("toggle");
        for (var i = 0; i < list.length; i++) {
            list[i].style.display = "none";
        }
        var sub = "province" + document.getElementById("countrySelect").value;
        document.getElementById(sub).style.display = "inline";
    }
    </script>
</body>

显示不同选择选项的选择选项

3 个答案: