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  
});

Answer 2

将其他下拉列表的值添加到onchange来电中。

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

或者，不要传递onChange方法中的参数并获取updateTable函数中的值。

通过json发送3个变量没有正确发送

2 个答案: