使用 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

您可以组合表单并将 onchange 替换为提交按钮：

<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>

如果你想要 onchange，你可以这样做：

<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/