2016-10-14 12 views
1

私はデータベースからのマーカーを表示しているgmaps.jsマップのビューを持っています。私はメーカーによってフィルタを追加しました。 HTML:CodeIgniterのコントローラに未知数の変数を送る方法は?

<select id="filtrs-1"> 
        <option value="all">All</option> 
        <option value="manufacturer1">Manufacturer1</option> 
        <option value="manufacturer2">Manufacturer2</option> 
        <option value="manufacturer3">Manufacturer3</option> 
        <option value="manufacturer4">Manufacturer4</option> 
     </select><br /> 
<button id="go-button" type="button">Click Me!</button> 

とjQuery:

var puzzles = <?= json_encode($puzzles);?>; 
    var allMap;  
    $(document).ready(function(){ 
       var allMap = new GMaps({ 
        el: '#map', 
        zoom: 7, 
        lat: 37.4419, 
        lng: -122.1419 
       }); 
       loadJsonMap(allMap, puzzles); 

       $('#go-button').click(function(){ 
        var filtrs1 = $('#filtrs-1').val(); 
        $.get('<?php echo base_url() ?>index.php/map/filter/' + filtrs1, function(response){ 
         allMap.removeMarkers(); 
         loadJsonMap(allMap, response); 
        }); 
       }); 
      }); 

loadJsonMapロードマーカーマップ上。だから私がボタンをクリックすると、フィルターメソッドのためのajaxコールが呼び出されます:

public function filter($man) 
     { 
       if ($man == 'all'){ 
        $data = $this->puzzles_model->get_puzzleCoordinates(); 
       }else{ 
        $data = $this->puzzles_model->get_puzzlesByManufacturer($man); 
       }    
       header('Cache-Control: no-cache, must-revalidate'); 
       header('Content-Type: application/json'); 
       echo json_encode($data); 
     } 

私はjqueryで初心者なので、私は本当に自分自身を誇りに思った。しかし、私は次のステップで立ち往生しています。ユーザーは、複数のメーカーによってフィルタリングすることができるはずですので、私はhtmlの変更:

<button id="go-button" type="button">Click Me!</button> 

    <div class="multiselect"> 
     <label><input type="checkbox" value="all" />All</label> 
     <label><input type="checkbox" value="manufacturer1" />manufacturer1</label> 
     <label><input type="checkbox" value="manufacturer2" />manufacturer2</label> 
     <label><input type="checkbox" value="manufacturer3" />manufacturer3</label> 
     <label><input type="checkbox" value="manufacturer4" />manufacturer4</label> 
    </div> 

を私はチェックボックスからデータを収集する必要がありますどのように...さらに

  1. をアリ得ることができませんか?私はすべての価値に対して別個のIDを持つべきですか?

  2. フィルタメソッドを変更して値の配列を取得するにはどうすればよいですか(チェックするチェックボックスの数はわかりません)

+0

。例:manufacturer [] –

答えて

1

名前= "XYZ []" のような配列としてチェックボックスを設定する必要がある最初の1以下JSfiddle。 以下のコードを参照して、複数のselectチェックボックスの値を配列とコンマで区切った文字列として取り出すことができます。あなたは、チェックボックス名の配列を使用する必要があります

$(document).ready(function(){ 
 

 
    $("#go-button").on("click",function(){ 
 
    
 
    var chb = $("input[name='go[]']:checked"); 
 
    var multi_val = []; 
 
    $.each(chb,function(){ 
 
     multi_val.push($(this).val()); 
 
    }); 
 
    console.log(multi_val); 
 
    console.log(multi_val.join()); 
 
    
 
    }); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="go-button" type="button">Click Me!</button> 
 

 
<div class="multiselect"> 
 
    <label> 
 
    <input type="checkbox" name="go[]" value="all" />All</label> 
 
    <label> 
 
    <input type="checkbox" name="go[]" value="manufacturer1" />manufacturer1</label> 
 
    <label> 
 
    <input type="checkbox" name="go[]" value="manufacturer2" />manufacturer2</label> 
 
    <label> 
 
    <input type="checkbox" name="go[]" value="manufacturer3" />manufacturer3</label> 
 
    <label> 
 
    <input type="checkbox" name="go[]" value="manufacturer4" />manufacturer4</label> 
 
</div>

0

ドロップダウンメニューから値を取得するには、jQueryで.val()を使用する必要があります。以下は値を取得して警告するコードです。私は、ドロップダウンリストの値を探して起動するボタンを.click()イベントを使用

$('#go-button').click(function() { 
    var manufacturer = $('select#filtrs-1').val(); 
    alert(manufacturer); 
}); 

。我々は単純にとあなたの選択した要素を参照して、var manufacturer =でvarを設定し、実際には.val()が要素から値を取得します。シンプルなアラートで、コード実行後に値が実際に取得されたかどうかを確認できます。

https://jsfiddle.net/gv2rkyn3/2/

+0

あなたが望むものを完全に理解できなかったので、jQueryバージョンをここに書き直しました。 – Rimble

+0

いいえ、あなたは最初にそれを得た!私は選択タグに問題はありません。私はfiltrs-1の値を取得し、マップを更新する別のメソッドを呼び出すことができます。私は、複数の値を取得する方法を疑うことはありません。これで、ユーザーは1つのメーカーのみで地図をフィルタリングすることも、すべて見ることもできますが、メーカー1とメーカー2をフィルタリングする可能性を実装したいと思います。両方のオプションがチェックされている場合、どのように両方の値を取得するのですか?両方の値をメソッドに渡すにはどうすればよいですか? –

関連する問題