2014-02-19 3 views
0

이 양식은 선택에 따라 사람들을 생성하고 링크로 리디렉션합니다! 엔진 제작, 출력 범위 및 위치를 선택해야합니다.html 형식의 단일 매개 변수에 두 값을 추가하는 방법은 무엇입니까?

엔진 제작 및 전력 범위의 현재 값은 호주 위치에 대한 값이지만 미국을 선택하면 다른 값이 필요합니다!

질문 : 각 항목에 대해 두 개의 서로 다른 값을 가질 수 있으며 위치에서 링크를 만들 때 사용할 값을 결정합니다.

<input type="radio" id="enginemake1" name="enginemake" value="6" checked/><label for="enginemake1">Chevrolet</label><br> 
<input type="radio" id="enginemake2" name="enginemake" value="8"/><label for="enginemake2">Chrysler</label><br> 
<input type="radio" id="enginemake3" name="enginemake" value="7"/><label for="enginemake3">Ford</label><br> 


<select id="powerrange" name="powerrange"> 
<option id="powerrange1" value="128">200 HP</option> 
<option id="powerrange2" value="178">250 HP</option> 
<option id="powerrange3" value="228" selected>300 HP</option> 
<option id="powerrange4" value="278">350 HP</option> 
</select> 

<input type="radio" id="location1" name="location" value="store" checked/><label for="location1">America</label><br> 
<input type="radio" id="location2" name="location" value="store.au"/><label for="location2">Australia</label><br> 


<script type="text/javascript"> 


function goToPage(){ 
    var location = $('input[name=location]:checked').val(); 
    var department = $('input[name=department]:checked').val(); 
    var enginemake = $('input[name=enginemake]:checked').val(); 
    var powerrange = document.getElementById("powerrange").value; 

    window.location.href = "http://"+location+".domain.com/catalog.aspx?section=-"+enginemake+"-"+powerrange+"-"; 
} 
</script> 
+0

모든 위치의 전원 범위가 같고 엔진 수가 같으면 연관 배열 (또는 javascript 객체)에 적합합니다. 'cars = {'store ':' '1': '225 HP', '2': '250 HP'}, 'store.au': { '1': '200 HP', '2': '220 HP '}}'로 접근하고'cars [location] [powerrange]'로 액세스합니다. 배열/객체를 사용하여이 작업을 수행 할 수 있으며 사용자가 위치 선택기를 변경할 때 선택 옵션이 변경되어 해당 위치의 실제 전력 범위 옵션을 볼 수 있습니다. –

+0

[Here] (http://jsfiddle.net/ k3qFz /)는 후자를 보여주는 바이올린이다. –

+0

@MichaelWheeler 레이블이 동일합니다! 사람들은 250 HP 또는 200 HP를 선택할 것입니다. 그러나 링크가 만들어지면 각 위치에 대한 값은 위치에 따라 다릅니다! –

답변

0

당신은 JSON으로 각 옵션의 값을 저장할 수 다음과 같이

<select id="powerrange" name="powerrange"> 
    <option id="powerrange1" value='{"store":128,"store.au":258}'>200 HP</option> 
    ... 
</select> 

는 그 다음 goToPage() 메소드를 수정 :

function goToPage(){ 
    var location = $('input[name=location]:checked').val(); 
    var department = $('input[name=department]:checked').val(); 
    var enginemake = $('input[name=enginemake]:checked').val(); 
    var powerrange = document.getElementById("powerrange").value; 
    var json = $.parseJSON(powerrange); 
    console.log(json[location]); 

    console.log("http://"+location+".domain.com/catalog.aspx?section=-"+enginemake+"-"+json[location]+"-"); 
} 

참조 this Fiddle 데모 용

관련 문제