链接两个组合框Javascript/HTML

我是Javascript新手，我正在尝试链接两个组合框！在第一个组合框中，我有希腊一些州的名字，还有其他一些城市的名字！在第二个组合框中，我有希腊的所有城市，我希望当我从第一个组合框中选择一个州时，只有某些城市会出现在第二个组合框中！例如，如果我选择Attikis，那么我只想在下拉菜单中显示Agias Paraskeuis，而不是Agias Varvaras和Agiou Dimitriou，反之亦然

我的代码是：

<form action="?" method="get">
    <div class="jtype">
        <label for="nomos"> Νομός </label> 
        <form name="nomoi_poleis" action="">
            <select id="combo_nomoi" name="combo_nomoi" onchange="cityChange()" > 
                <option value="attikis"> Attikis</option>
                <option value="thessalonikis"> Thessalonikis</option> 
            </select>
            <br></br>
            <label for="poli">Πόλη</label>
            <select id="poleis" name="poleis">
                <option value="agias varvaras"> Agias Varvara</option>
                <option value="agias paraskeuis">Agias Paraskeuis</option>
                <option value="agiou dimitriou"> Agiou Dimitriou</option>
            </select>
        </form>
    </div>
</form>

安娜我的JS：

    <script type="text/javascript">
            function changeCity(){
                var nomos = document.getElementById("combo_nomoi");
                if (nomos.value == "attikis"){
                    document.getElementById("attikis");
                }
                else{
                    document.getElementById("thessalonikis");
                }
            }
            </script>

---

0最简单的方法是设置一组菜单，其中除一个菜单外，所有菜单的“显示”属性都设置为“无”，而要显示的菜单则设置为“内联”。然后在onchange处理程序中，在循环中运行选择列表，相应地设置display属性。注意这样的内联事件处理程序不是很好的实践；最好在页面初始化代码中通过JavaScript进行设置。它看起来像：

HTML

JavaScript

function change_city(evt)
{
var states=document.getElementById('states'),whichstate;

whichstate=states.options[state.selectedIndex].value;

for(var i=0;i<states.options.length;i++)
   document.getElementById('cities_'+i).style.display=(i==whichstate ? 'inline' : 'none');
}

---

以下是一个粗略的示例，仅使用JS即可实现此功能：

HTML

---

如上所示，您可以禁用不希望用户选择的选项。我将留给您一个更好的方法，而不是通过id选择每个选项。

您的javascript在哪里？请不要使用嵌套表单元素！删除一个表单刚刚添加了我的JS，我已经忘记了！

function change_city(evt)
{
var states=document.getElementById('states'),whichstate;

whichstate=states.options[state.selectedIndex].value;

for(var i=0;i<states.options.length;i++)
   document.getElementById('cities_'+i).style.display=(i==whichstate ? 'inline' : 'none');
}

<form action="?" method="get">
<div class="jtype">
    <label for="nomos">Νομός</label>
    <form name="nomoi_poleis" action="">
        <select id="combo_nomoi" name="combo_nomoi">
            <option value="attikis">Attikis</option>
            <option value="thessalonikis">Thessalonikis</option>
        </select>
        <br></br>
        <label for="poli">Πόλη</label>
        <select id="poleis" name="poleis">
            <option id="option1" value="agias varvaras">Agias Varvara</option>
            <option id="option2" value="agias paraskeuis">Agias Paraskeuis</option>
            <option id="option3" value="agiou dimitriou">Agiou Dimitriou</option>
        </select>
    </form>

document.getElementById("combo_nomoi").onchange = cityChange
function cityChange() {
   var elem = document.getElementById("combo_nomoi");
   if (elem.options[elem.selectedIndex].text == "Attikis") {
      document.getElementById("option1").disabled = true;
      document.getElementById("option2").disabled = false;
      document.getElementById("option3").disabled = false;
   }
   if (elem.options[elem.selectedIndex].text == "Thessalonikis") {
      document.getElementById("option1").disabled = false;
      document.getElementById("option2").disabled = true;
      document.getElementById("option3").disabled = true;
   }
}