Question

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

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

Answer 1

0最简单的方法是拥有一组<select>菜单，其中一个菜单的display属性设置为none，并且要显示的菜单设置为{ {1}}。然后在inline处理程序中，在循环中运行选择列表，相应地设置onchange属性。注意这样的内联事件处理程序不是很好的做法;最好通过页面初始化代码中的JavaScript设置它们。它看起来很像：

（HTML）

display

的JavaScript

<select id="states">
   <option value="0" selected="selected">State 1</option>
   <option value="1">State 2</option>
   ...
</select>

<select id="cities_0" style="display: inline;">
   <option value="...">Name 1</option>
   <option value="...">Name 2</option>
   ...
</select>

<select id="cities_1" style="display: none;">
   <option value="...">Name 1</option>
   <option value="...">Name 2</option>
   ...
</select>

Answer 2

以下是一个粗略的例子（仅使用JS）来实现这个目的：

http://jsfiddle.net/FMZ2H/

HTML

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

使用Javascript：

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

如上所示，您可以停用不希望用户选择的选项。我会留给你做比用他们的id选择每个选项更好的方式。

链接两个组合框Javascript / HTML

2 个答案: