如何使用 AJAX 请求获取 select 列表中的所有值？

Question

我正在使用以下代码传递下拉列表的 selected 值：

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

但现在我想获取 select 列表的所有值并将它们传递给变量：tableList、fieldList 和 attributeList。我可以像处理 selected 值一样这样做吗？

Answer 1

试试这个：

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

Answer 2

函数调用中的事件绑定不是绑定事件的好方法，它会导致多个绑定。 最好在文档就绪块中执行此操作。

But now I want to get al the values of the select lists and pass them in the variables: tableList, fieldList and attributeList. Can i do that the same way as I did with the selected values?

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

Answer 3

你必须像这样更改代码

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

如何使用 AJAX 请求获取 select 列表中的所有值？

How to get all the values in a select list with a AJAX request?

javascript

jquery

ajax

selectlist