使用GET表單向URL添加額外參數

Question

我使用帶GET方法的表單向我的url添加參數。 但是我有一個問題。

我使用不同的形式在URL中放入不同的參數。 但是，當我選擇第一個，並且它在URL中，並且我選擇另一個時，第一個消失。

我該如何解決這個問題？

<form action="" method="GET"> 
<select name="course" data-placeholder="Kies een vak..." class="chzn-select" tabindex="2" onchange="this.form.submit();"> 
            <option value=""></option> 
            <option value="0">Alles</option> 
            <option value="1">Markten & Prijzen</option> 
            <option value="2">Wiskunde</option> 
            <option value="3">Marketing</option> 
</select> 
</form> 

<form action="" method="GET"> 
<select name="price" data-placeholder="Prijscategorie..." class="chzn-select" tabindex="2" onchange="this.form.submit();"> 
            <option value=""></option> 
            <option value="0">Alles</option> 
            <option value="2">< 2 euro</option> 
            <option value="4">< 4 euro</option> 
            <option value="6">< 6 euro</option> 
            <option value="8">< 8 euro</option> 
            <option value="10">< 10 euro</option> 
</select> 
</form> 

Answer 1

您可以組合形式和更換平變化有一個提交按鈕：

<form action="" method="GET"> 
    <select name="course" data-placeholder="Kies een vak..." class="chzn-select" tabindex="2"> 
     <option value=""></option> 
     <option value="0">Alles</option> 
     <option value="1">Markten & Prijzen</option> 
     <option value="2">Wiskunde</option> 
     <option value="3">Marketing</option> 
    </select> 
    <select name="price" data-placeholder="Prijscategorie..." class="chzn-select" tabindex="2"> 
     <option value=""></option> 
     <option value="0">Alles</option> 
     <option value="2">< 2 euro</option> 
     <option value="4">< 4 euro</option> 
     <option value="6">< 6 euro</option> 
     <option value="8">< 8 euro</option> 
     <option value="10">< 10 euro</option> 
    </select> 
    <input type="submit" value="submit"> 
</form> 

如果你想平變化，你可以這樣做：

<form action="" method="GET"> 
    <select name="course" data-placeholder="Kies een vak..." class="chzn-select" tabindex="2" onchange="this.form.submit();"> 
     <option value=""></option> 
     <option value="0" <?php if($_GET[course] == '0'){ echo 'selected="selected"'; }?>>Alles</option> 
     <option value="1" <?php if($_GET[course] == '1'){ echo 'selected="selected"'; }?>>Markten & Prijzen</option> 
     <option value="2" <?php if($_GET[course] == '2'){ echo 'selected="selected"'; }?>>Wiskunde</option> 
     <option value="3" <?php if($_GET[course] == '3'){ echo 'selected="selected"'; }?>>Marketing</option> 
    </select> 
    <select name="price" data-placeholder="Prijscategorie..." class="chzn-select" tabindex="2" onchange="this.form.submit();"> 
     <option value=""></option> 
     <option value="0" <?php if($_GET[price] == '0'){ echo 'selected="selected"'; }?>>Alles</option> 
     <option value="2" <?php if($_GET[price] == '2'){ echo 'selected="selected"'; }?>>< 2 euro</option> 
     <option value="4" <?php if($_GET[price] == '4'){ echo 'selected="selected"'; }?>>< 4 euro</option> 
     <option value="6" <?php if($_GET[price] == '6'){ echo 'selected="selected"'; }?>>< 6 euro</option> 
     <option value="8" <?php if($_GET[price] == '8'){ echo 'selected="selected"'; }?>>< 8 euro</option> 
     <option value="10" <?php if($_GET[price] == '10'){ echo 'selected="selected"'; }?>>< 10 euro</option> 
    </select> 
</form> 

Answer 2

你能夠保持他們作爲兩個單獨的形式，但設置每個屬性id（當然每個唯一的ID）和onchange事件應該觸發一個函數提交。

<form action="" method="GET" id="firstF"> 
<select name="course" data-placeholder="Kies een vak..." class="chzn-select" tabindex="2" onchange="doSubmit('firstF')"> 
            <option value=""></option> 
            <option value="0">Alles</option> 
            <option value="1">Markten & Prijzen</option> 
            <option value="2">Wiskunde</option> 
            <option value="3">Marketing</option> 
</select> 
</form> 

<form action="" method="GET" id="secondF"> 
<select name="price" data-placeholder="Prijscategorie..." class="chzn-select" tabindex="2" onchange="doSubmit('secondF')"> 
            <option value=""></option> 
            <option value="0">Alles</option> 
            <option value="2">< 2 euro</option> 
            <option value="4">< 4 euro</option> 
            <option value="6">< 6 euro</option> 
            <option value="8">< 8 euro</option> 
            <option value="10">< 10 euro</option> 
</select> 
</form> 

，然後編寫JavaScript函數如下：

<script> 
    function doSubmit(id){ 
    f = document.getElementById(id); 
    f.submit(); 
    } 

</script> 

以下是現場演示，http://jsfiddle.net/JkrCu/

如果選擇改變爲這是更新的演示，以停止提交空值，即列表中的初始項目（空白項目）http://jsfiddle.net/JkrCu/1/