버튼 클릭시 리디렉션되는 HTML 탐색 메뉴/양식 목록

여기 내가 수행하려고 시도한 것이 있으며, 아마도 내가 그것을 지나치게 생각하고있는 것처럼 느껴집니다. 나는 쉽게 드롭 다운 탐색 목록을 만들 수 있지만 필요한 것은 두 개의 다른 드롭 다운 목록을 결합하여 사용자 옵션을 제공 한 다음 단추를 클릭하면 선택 항목에 해당하는 페이지로 보낼 것입니다.버튼 클릭시 리디렉션되는 HTML 탐색 메뉴/양식 목록

예를 들어, 드롭 다운 목록 하나 : 어떤 유형의 조언이 필요합니까?
-Career
-Relationships
- 건강

droplist이 : 무엇 레이아웃을 원하는가?
- 빠른 및 더러운
- 표준
-In-깊이

그럼 난 그냥이 페이지의 모든 조합에 대한 링크로 프로그래밍해야합니다. 선택에 따라 프로그램이 올바른 리디렉션에서 어떻게 수행됩니까?

출처

2014-06-18 ddonche

이 같은 드롭 다운 메뉴 쌍 가지고 가정 :

<form method="post"> 
    <p>What type of advice do you need? 
    <br><select id="s1"> 
     <option>Career</option> 
     <option>Relationships</option> 
     <option>Health</option> 
    </select> 

    <p>What layout do you want? 
    <br><select id="s2"> 
     <option>Quick and Dirty</option> 
     <option>Standard</option> 
     <option>In-depth</option> 
    </select> 

    <input type="button" onclick="send(this.form)" value="Send"/> 
</form>

양식 끝에 버튼 클릭 때 선택 당신 항목 비교시키려는 페이지 리디렉션 함수 호출 각 메뉴에서. 여기

function send(form) { 
    var s1 = document.getElementById("s1"); 
    var s2 = document.getElementById("s2"); 

    var choice1 = s1.options[s1.selectedIndex].text;  
    var choice2 = s2.options[s2.selectedIndex].text; 

    if (choice1 == "Career" && choice2 == "Quick and Dirty") { 
     location.href = "http://quickdirtycareers.com"; 
    } else if (choice1 == "Career" && choice2 == "Standard") { 
     location.href = "http://standardcareers.com"; 
    } else { 
     location.href = "http://careers.stackoverflow.com"; 
    } 
}

가있다 :이 기능은 (각 option에서 사용하는 경우, 또는 값) 선택된 인덱스와 텍스트를 가져오고 condicional 지점에서 테스트 (this.form 전달) 형태에 대한 참조를 받아야한다 http://jsfiddle.net/helderdarocha/TNZ9A/

(. 그것을 할 수있는 많은 다른 방법, 그것은 jQuery를 사용하여 이러한 향상된 기능을 추가하는 것이 더 쉽습니다 등 추가 CSS, 동적 선택, 초점이 있습니다)

: 작업 샘플 바이올린

출처

2014-06-18 05:44:28 helderdarocha

버튼 클릭시 리디렉션되는 HTML 탐색 메뉴/양식 목록

답변

관련 문제