javascript - 通过 json 发送 3 个变量未正确发送

Question

我有 3 个通过 JavaScript 创建的下拉菜单，它们在做出选择时调用“updateTable”函数。

最终，我尝试根据下拉列表中的选择来“过滤”数据表。如果用户只选择其中一个下拉列表，我希望其他选项同时提交(如果未选择，则仅使用空数据，如果他们已经选择了当前选择的选项，则仅使用当前选择的选项)。

我的 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 请求是否不正确？

Answer 1

像这样的怎么样: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  
});