두 개의 콤보 상자 링크 Javascript/HTML

Question

저는 Javascript를 처음 사용했습니다. 두 개의 콤보 상자를 연결하려고합니다! 첫 번째 콤보 상자에는 그리스의 일부 주 및 다른 도시의 이름이 있습니다! 두 번째에는 그리스에있는 모든 도시를 가지고 있는데, 첫 번째 콤보 상자에서 상태를 선택하면 특정 도시 만 초에 나타납니다. 예를 들어 Attikis를 선택한 경우 Agias Paraskeuis 만 드롭 다운 메뉴에 표시하고 Agias Varvaras 및 Agiou Dimitriou는 표시하지 않고 그 반대의 경우도 표시하고 싶습니다. 그중가 설정된 display 속성이 하나를 제외한 모든

<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> 메뉴의 설정을하는 것입니다 :

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

내 코드는 이것이다 none, 표시하고자하는 것을 inline으로 설정하십시오. 그런 다음 onchange 처리기에서 루프의 선택 목록을 실행하여 그에 따라 display 속성을 설정합니다. 그런 인라인 이벤트 핸들러는별로 좋지 않습니다. 페이지 초기화 코드에서 JavaScript를 통해 설정하는 것이 좋습니다. 이 같은 모양 misght :

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

자바 스크립트

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

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> 

자바 스크립트 :

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

위와 같이, 당신은 당신이 당신의 사용자가 선택하지 않을 옵션을 해제 할 수있다. 나는 각자의 이드를 선택하는 것보다 더 나은 방법으로 당신에게 맡길 것입니다.