2014-02-19 29 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對象)。 '汽車= {'商店':{'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標籤是一樣的!人們會選擇250HP或200HP,但是當創建鏈接時,每個鏈接的值將根據位置而有所不同! –

回答

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進行演示

相關問題