链接两个组合框Javascript/HTML

Link two combo boxes Javascript/HTML

本文关键字：Javascript HTML 组合 两个 链接      更新时间：2023-09-26

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

0最简单的方法是有一组<select>菜单，除了其中一个之外，所有的display属性都设置为none，您想要显示的设置为inline。然后在onchange处理程序中循环遍历选择列表，并相应地设置display属性。注意，像这样的内联事件处理程序不是很好的实践;最好在页面初始化代码中通过JavaScript设置它们。它可能看起来像:

(HTML) 

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

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选择每个选项更好的方法。

相关文章：