1

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

2 に答える 2

2

フォームを組み合わせて、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>
于 2012-12-12T14:29:46.687 に答える
1

それらを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/

于 2012-12-12T15:02:55.040 に答える