2012-08-11 51 views
0

我想做一個基本下拉的論壇,當選擇選項時,他們會加載一個網址提交按鈕點擊。下拉窗體,當提交加載url

,我想這樣的事情

降自行車下來一個

品牌: KTM自行車 寶馬 Ect的

型號: (如果KTM上面採摘會顯示) EXC Ect

(如果寶馬以上選擇將會sh OW) GS 冒險 Ect的

因此,如果自行車的化妝是KTM和提交按鈕的點擊模式是990將加載 Www.website.com/ktm/990

這是代碼我有我已經挑選部分分類,所以如果你選擇KTM,它會向你展示KTM的模型,並且與寶馬一樣,唯一的問題是我無法獲得該網址的工作,並沒有真正的想法如何做到這一點。

<script language="javascript" type="text/javascript"> 
<!-- 
function setOptions(chosen) { 
var selbox = document.myform.model; 

selbox.options.length = 0; 
if (chosen == " ") { 
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); 

} 
if (chosen == "BMW") { 
    selbox.options[selbox.options.length] = new 
Option('R1200-GS-Adventure','R1200-GS-Adventure'); 
    selbox.options[selbox.options.length] = new 
Option('R1200-GS','R1200-GS'); 
    selbox.options[selbox.options.length] = new 
Option('R1200-RT','R1200-RT'); 
    selbox.options[selbox.options.length] = new 
Option('1150-GS-Adventure','1150-GS-Adventure'); 
    selbox.options[selbox.options.length] = new 
Option('1150-GS','1150-GS'); 
} 
if (chosen == "KTM") { 
    selbox.options[selbox.options.length] = new 
Option('990','990'); 
    selbox.options[selbox.options.length] = new 
Option('640','640'); 
} 
if (chosen == "Yamaha") { 
    selbox.options[selbox.options.length] = new 
Option('Tenére 660XT','Tenére 660XT'); 
    selbox.options[selbox.options.length] = new 
Option('Super Tenére 1200XT','Super Tenére 1200XT'); 
} 
} 
// --> 
</script> 

和表單代碼

<form name="myform"><div align="center"> 
<select name="bike" size="1" 
onchange="setOptions(document.myform.bike.options[document.myform.bike.selectedIndex].value);"> 
<option value=" " selected="selected"> </option> 
<option value="BMW">BMW</option> 
<option value="KTM">KTM</option> 
<option value="Yamaha">Yamaha</option> 
</select><br> <br> 
<select name="model" size="1"> 
<option value=" " selected="selected">Please select one of the options above first</option> 
</select> 
<input type="button" name="go" value="Search" 
onclick="alert(document.myform.model.options[document.myform.model.selectedIndex].value);"> 
</div></form> 

回答

0

添加此功能,您的腳本

的Javascript:

function loadURL(){ 


    var bike = document.myform.bike.options[document.myform.bike.selectedIndex].value; 
    var model = document.myform.model.options[document.myform.model.selectedIndex].value; 


    if(bike != ' ' && model != ' '){ 

     var url = 'http://YOURWEBSITE.com/' + bike + '/' + model; 
     window.location = url; 

    }//if 




} 

,使這個您的提交按鈕

HTML

<input type="button" name="go" value="Search" onclick="loadURL();"> 
+0

非常感謝:) – 2012-08-11 15:26:58

0

您可以使用選定選項的簡單拼接的URL,並在你的按鈕單擊處理程序設置location = "<new URL>"重定向到所選擇的頁面:

onclick="location='http://www.website.com/' + myform.bike.options[myform.bike.selectedIndex].value + '/' + myform.model.options[myform.model.selectedIndex].value;" 

讓我知道如果你需要一個工作的解決方案。

您還應該進行檢查,以確保用戶在允許點擊按鈕之前在自行車下拉列表中選擇了某些內容。否則,該URL將無效。

編輯:這裏是一個的jsfiddle顯示了完整的解決方案:http://jsfiddle.net/V8jPn/1/