2012-05-28 3 views
0

서로 관련하여 3 개의 종속 드롭 다운을 만들어야합니다. 따라서 첫 번째 항목이 선택되면 관련 데이터가 두 번째 드롭 다운에 표시되고 두 번째 드롭 다운에서 옵션이 선택되면 세 번째 드롭 다운에서 관련 데이터가 표시됩니다.서로 관련하여 3 개의 드롭 다운을 만듭니다.

그리고이 양식에서 $ _GET을 사용해야합니다. 따라서 두 번째 옵션의 특정 옵션이 선택되면 마사지가 나타나고 옵션이 세 번째 드롭 다운으로 선택되면 페이지가 www로 리디렉션됩니다 .google.com. 첫 번째 파일에는 관련 데이터가 두 개 필요 없으므로 페이지를 선택하면 www.example.com으로 페이지가 리디렉션됩니다.

JavaScript가 필요하다는 것을 알고 있지만, 불행히도 JS는 아직 모릅니다.

다른 매개 변수 중 하나와 충돌하기 때문에 JavaScript에 매개 변수를 보내려면 "this.value"를 사용하지 마십시오. 난 당신이 내가 말하려고했던 것을 얻을 희망, 나는 그것을 설명하기 위해 열심히 노력

Drop down 1 ----------------------- drop down 2 ----------------------- drop down 3 

option 1 (redirect to msn.com) 

option 2 ==========================> Option 100 ======================> Option 500 
            Option 101       Option 501 
Option 3 (redirect to google.com) Option 102 (message:Hello) 
            Option 103 ======================> Option 700 
                     Option 701 

:

이 같은

뭔가를 (그리고 페이지를 다시로드하지 않습니다).

도움 주셔서 감사합니다. 여기

답변

2

은 ... 신속하고 더러운 답변입니다

분명히
<html> 
     <head> 
     <script type='text/javascript'> 
      var drop3Options = {"100":["500","501"],"103":["700","701"]}; 
      function drop1Change(){ 
      var value = document.getElementById("drop1").value; 
      if(value == "msn") 
       window.location.href = "http://www.msn.com"; 
      else if(value == "google"){ 
       window.location.href = "http://www.google.com"; 
      }     
      } 
      function drop2Change(){ 
      var value = document.getElementById("drop2").value; 
      var drop3List = document.getElementById("drop3"); 
      if(drop3Options[value]){ 
       drop3List.options.length = 0; 
       for(var i = 0; i < drop3Options[value].length; i++){ 
       drop3List.options[i] = new Option(drop3Options[value][i],drop3Options[value][i]); 
       } 
      } 
      } 
     </script> 
     </head> 

     <body> 
     <form method='GET' action='serverScript.php'> 
      <select id='drop1' onchange='drop1Change()'> 
      <option value='msn'>MSN</option> 
      <option value='dr2'>DROP 2</option> 
      <option value='google'>GOOGLE</option> 
      </select> 

      <select id='drop2' onchange='drop2Change()'> 
      <option value='100'>100</option> 
      <option value='101'>101</option> 
      <option value='102'>102</option> 
      <option value='103'>103</option>    
      </select>   

      <select id='drop3'> 
      <option value='500'>500</option> 
      <option value='501'>501</option> 
      </select> 
      <input type='submit' value='SUBMIT'/> 
     </form> 
     </body> 
    </html> 

나는 당신이이 스크립트를 사용하여 정확히 모르는, 그래서 내가 가정을하고 더 나은 서비스를 제공하기가 어렵다 코드,하지만이 질문을 이해할 무엇을 할 것입니다 .. 나는 또한 어떤 서버 사이드 스크립트 당신이 이것을 보낼 것입니다 모르겠어요. 하지만 서버 스크립트의 위치를 ​​반영하도록 양식의 ACTION 속성을 변경하십시오.

자바 스크립트에는 하나의 전역 변수 (drop3Options)가 있습니다. 이 객체는 select 3 옵션에 대해 2 개의 배열을 갖는 두 개의 속성을 가진 객체입니다.

그래서 drop3Options [ '100']은 배열 '[500', '501'] 및 drop3Options [ '103'] 배열 [ '700', '701 ']

선택 상자를 변경하면 각 선택 요소에 "onchange"속성을 추가하여 적절한 방법을 호출하고, 값에 따라 적절하게 수행합니다.

더 많은 작업을 수행해야한다고 가정하므로 자세한 내용을 말하면 기꺼이 도와 드리겠습니다.

관련 문제