2

我有 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 请求？

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 回答