如何通過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

在函數調用事件綁定不是綁定一個事件的好方法，它可以導致多個綁定。 在文檔就緒區塊中最好做到這一點。

但是現在我想獲得選擇列表的值並將它們傳遞給變量：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); 
    } 
    }) 
}); 

Answer 2

試試這個：

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 3

你如果是你爲什麼要使用`document.getElementById`使用jQuery來改變這樣的

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