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

Question

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

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。我可以像使用所选值一样执行此操作吗？

Answer 1

函数调用中的事件绑定(bind)不是绑定(bind)事件的好方法，它可能导致多次绑定(bind)。 最好在文档准备 block 中执行此操作。

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