2

JavaScript で作成された 3 つのドロップダウンがあり、選択が行われると「updateTable」関数が呼び出されます。

最終的に、ドロップダウンでの選択に応じて、データのテーブルを「フィルタリング」しようとしています。ユーザーがドロップダウンの 1 つを選択した場合、他の選択肢を同時に送信する必要があります (選択されていない場合は空のデータ、または既に選択されている場合は現在選択されている選択肢)。

私の updateTables 関数は次のようになります。

function updateTables (creativeVal,stationVal,verticalVal) 
  {
    //-----------------------------------------------------------------------
    //Send the filter criteria
    //-----------------------------------------------------------------------

    $.ajax({                                      
        url: 'api.php',   //the script to call to get data          
        data: {"creative": creativeVal, "station": stationVal, "vertical": verticalVal},  //insert url arguments here to pass to api.php for example "id=5&parent=6"
        dataType: 'json',   //data format      
        success: function(response) //on recieve of reply     
        { //Do the following on Success   

        $('#results').empty();
        updateTableRows(response);

        } //end of on success
    }); //End Ajax call
}; //End Creative Function

私のドロップダウンは次のようになります。

<!--DROPDOWNS-->
 <div id="dropdowns">

    <div id="creativesel">
    Creative -  
    <select name="creative-select" id="creative-select" onChange ="updateTables(this.value);">
        <option value="" selected="selected">All</option>
    </select>
    </div> 

    <div id="stationsel">
    Station - 
    <select name="station-select" id="station-select" onChange ="updateTables(this.value)">
        <option value="" selected="selected">All</option>
    </select>
    </div>

     <div id="verticalsel">
    Vertical - 
    <select name="vertical-select" id="vertical-select" onChange ="updateTables(this.value)">
        <option value="" selected="selected">All</option>
    </select>
    </div>

</div> <!--Dropdowns ending-->

どのドロップダウンが選択されていても、リクエストは追加されますか?creative=whatever_the_user_selected_from_any_of_the_3_dropdowns

最終的には、次のようなものを追加したいですか？creative=whatever_selection&vertical=whatever_selection&station=whatever_selection そのため、相手側でデータを取得して、必要な処理を行うことができます。

json リクエストを不適切に送信していますか?

4

2 に答える 2

2

このようなものはどうですか: http://jsfiddle.net/joeframbach/2XBVv/

onchangeイベントをそれが属するjqueryに移動し、変更されたものだけでなく、すべてのドロップダウンからすべての値を取得しています。

html :

<!--DROPDOWNS-->
 <div id="dropdowns">

    <div id="creativesel">
    Creative -  
    <select name="creative-select" id="creative-select">
        <option value="" selected="selected">All</option>
    </select>
    </div> 

    <div id="stationsel">
    Station - 
    <select name="station-select" id="station-select">
        <option value="" selected="selected">All</option>
    </select>
    </div>

     <div id="verticalsel">
    Vertical - 
    <select name="vertical-select" id="vertical-select">
        <option value="" selected="selected">All</option>
    </select>
    </div>

</div> <!--Dropdowns ending-->

JavaScript :

$(function() {
    $('#dropdowns select').change(function() {
        //-----------------------------------------------------------------------
        //Send the filter criteria
        //-----------------------------------------------------------------------

        $.ajax({                                      
            url: '/echo/json',   //the script to call to get data          
            data: {"creative": $('#creative-select').val(), "station": $('#station-select').val(), "vertical": $('#vertical-select').val()},  //insert url arguments here to pass to api.php for example "id=5&parent=6"

            dataType: 'json',   //data format      
            success: function(response) //on recieve of reply     
            { //Do the following on Success   

                $('#results').empty();
                console.log(response);

            } //end of on success
        }); //End Ajax call
    }); //End Creative Function  
});
于 2013-04-03T14:52:24.420 に答える
1

他のドロップダウンの値を呼び出しに追加しますonchange。

updateTables($('#creative-select').val(), $('#station-select').val(), $('#vertical-select').val())

または、onChange メソッドでパラメーターを渡さず、updateTable 関数で値を取得します。

于 2013-04-03T14:51:47.137 に答える