如何使用AJAX请求获取选择列表中的所有值?

时间:2016-05-25 11:54:52

标签: javascript jquery ajax selectlist

我使用以下代码传递下拉列表的选定值:

function getData(){
       //Variabelen die worden gehaald uit de gekozen dropdown selecties
        $('#slctTable, #slctField, #slctAttribute').change(function ()
        {
            //var fieldvalues = fieldValues; 
            var tableSelected = document.getElementById("slctTable").value;
            var fieldSelected = document.getElementById("slctField").value;
            var attributeSelected = document.getElementById("slctAttribute").value;
            $.ajax({
                "url": "php/getData.php",
                "type": "GET",
                "data": {
                    //fieldValues: fieldValues, 
                    tableSelected: tableSelected,
                    fieldSelected: fieldSelected,
                    attributeSelected: attributeSelected
                },
                success: function(data){
                   // mapData(data);
                }
            })
        });
    };

但现在我想得到选择列表的值并将它们传递给变量:tableList,fieldList和attributeList。我能否像使用所选值一样进行此操作?

3 个答案:

答案 0 :(得分:1)

函数调用中的事件绑定不是绑定事件的好方法,它可能导致多个绑定。 最好在doc ready块中执行此操作

  

但是现在我想得到选择列表的值并将它们传递给变量:tableList,fieldList和attributeList。我能否像使用所选值一样进行此操作?

function allValues(el) {
  var arr = $('option', el).map(function(i, v) {
    return this.value;
  }).get();

  return arr;
}
$('#slctTable, #slctField, #slctAttribute').change(function() {
  //var fieldvalues = fieldValues; 
  var tableSelected = document.getElementById("slctTable").value;
  var fieldSelected = document.getElementById("slctField").value;
  var attributeSelected = document.getElementById("slctAttribute").value;
  var tableList = allValues($('#slctTable'));
  var fieldList = allValues($('#slctField'));
  var attributeList = allValues($('#slctAttribute'));
  $.ajax({
    "url": "php/getData.php",
    "type": "GET",
    "data": {
      //fieldValues: fieldValues, 
      tableSelected: tableSelected,
      fieldSelected: fieldSelected,
      attributeSelected: attributeSelected,
      tableList: tableList,
      fieldList: fieldList,
      attributeList: attributeList
    },
    success: function(data) {
      // mapData(data);
    }
  })
});

答案 1 :(得分:0)

试试这个:

function getData() {
        //Variabelen die worden gehaald uit de gekozen dropdown selecties
        $('#slctTable, #slctField, #slctAttribute').change(function () {
            //var fieldvalues = fieldValues; 
            var tableSelected = document.getElementById("slctTable").value;
            var fieldSelected = document.getElementById("slctField").value;
            var attributeSelected = document.getElementById("slctAttribute").value;
            $.ajax({
                "url": "php/getData.php",
                "type": "GET",
                "data": {
                    //fieldValues: fieldValues, 
                    tableList: tableSelected,
                    fieldList: fieldSelected,
                    attributeList: attributeSelected
                },
                success: function (data) {
                    // mapData(data);
                }
            })
        });
    };

答案 2 :(得分:0)

你必须改变这样的代码

function getData(){
       //Variabelen die worden gehaald uit de gekozen dropdown selecties
        $('#slctTable, #slctField, #slctAttribute').change(function ()
        {
            //var fieldvalues = fieldValues; 
            var tableSelected = $("#slctTable :selected").val();
            var fieldSelected = $("#slctField :selected").val();
            var attributeSelected = $("#slctAttribute :selected").val();
            $.ajax({
                "url": "php/getData.php",
                "type": "GET",
                "data": {
                    //fieldValues: fieldValues, 
                    tableSelected: tableSelected,
                    fieldSelected: fieldSelected,
                    attributeSelected: attributeSelected
                },
                success: function(data){
                   // mapData(data);
                }
            })
        });
    };