Question

我有一个按钮，它向网站添加一个下拉菜单，在下拉值属性中是数字。我使用ajax函数使用下拉列表中的值运行数学公式。这是我的代码：

var data1 = $('#data1').val();
var data2 = $('#data2').val();
var data3 = $('#data3').val();


$.ajax({
  type: 'GET',
  url: 'ajaxcalc.php',
  data: {
    data1: data1,
    data2: data2,
    data3: data3
   },
  dataType: 'json',
  cache: false,
  success: function(data) { alert('yay!'); })
   });
  },
 });

//show dropdowns code
$('#data1').click(function() {
var $d = $('<select name="data1" id="data1"><option selected="selected" value="null">Choose your data!</option><option value="5">Option 1</option><option value="1">Option 2</option><option value="14">Option 3</option></select><br/>').fadeIn().delay(1000);
$('.data1').append($d);
});

//html button code for append data1 drop down
<button id="data1">Add Dropdown</button>

当人们使用相同的ID追加2个相同的下拉菜单时，我的问题就出现了，我无法检索这两个变量......它只获得第一个下拉值！

在我的ajaxcalc.php文件中，我有这个来检索变量：

$data1 = $_GET['data1'];
$data2 = $_GET['data2'];

我试图允许某人将data1下拉两次附加并选择2个不同的值，但仍然通过.ajax（）函数将这些值传递给我的ajaxcalc.php文件！有谁知道我怎么能做到这一点？

Answer 1

在您的情况下，您没有id“data2”或“data3”。你继续附加“data1”。附加下拉列表时，您需要使用id增加数字。

//show dropdowns code
var dropdownCount = 1;
$('#data1').click(function() {
    var $d = $('<select name="data' + dropdownCount + '" id="' + dropdownCount + '"><option selected="selected"          value="null">Choose your data!</option><option value="5">Option 1</option><option value="1">Option 2</option><option value="14">Option 3</option></select><br/>').fadeIn().delay(1000);
    $('.data1').append($d);
});

尝试使用该代码代替您的下拉代码。

修改

更好的解决方案是使用类而不是id。如果每个下拉列表都有class，您可以全部选择它们（无论添加了多少）并循环遍历它们以获取值。

var dropdowns = $(".dropdowns");
//Loop through them to get values and pass them to your ajax call

EDIT2

这是一个小提琴我一起展示如何添加多个下拉列表并将数组传递回PHP页面而不是单个变量。

http://jsfiddle.net/JtUuN/

PHP的动态.ajax（）数据变量

1 个答案: