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

问题描述：

我希望有人从我的列表中选择一个国家在该国家的省份出现在第二个选择栏中这是可能的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>

看吧 - http://jsfiddle.net/mplungjan/65Q9L/ –

您应该创建一个数据集的第一再想想实施。 – Mamun

答

您可能必须使用JavaScript来做到这一点。我已经编辑了一下你的HTML，使选择过程更容易。有可能是用HTML表单元素的方式，但试试这个：

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'; 
 
}

<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>

如果我运行代码片段，那么我的工作。但是当我复制粘贴到我的HTML和脚本到脚本标记它不起作用，我做错了什么？对不起：/ – Jelles

确保您的脚本标记位于HTML的底部。 –

答

我不确定html的方式，但jQuery的方式很简单。

选定的手柄选项countries。根据选定的国家/地区省/地区：

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

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

     } 
    }); 
});

答

您需要使用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>

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

相关推荐