Question

我使用带有GET方法的表单将参数添加到我的网址。但是我有一个问题。

我使用不同的表单在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/

使用GET表单向URL添加额外参数

2 个答案: