Question

我有一个动态添加行的表。

在其中一个单元格中，我想在下拉列表和输入框之间切换。

下拉列表是通过AJAX加载的PHP文件。问题是下拉列表只呈现一次。首次单击切换按钮时，将显示下拉列表。第二次单击将其切换到输入字段，就像它应该的那样。第三次单击不执行任何操作，它只会保留在输入框中，并且不会切换回下拉列表。

如果我注释掉AJAX调用并输入一个简单的下拉列表，它会来回切换就好了。所以我认为问题在于AJAX部分。

指向http://jsfiddle.net/6h5BD/1/的链接注意：AJAX目前在jsfiddle中被注释掉并替换为临时下拉列表，因此您可以看到我正在寻找的结果。

有问题的JS部分：

  $('input[name="button"]').toggle(function() {
      $.ajax({
            url: 'http://localhost/brandDropdown.php',
            type:'POST',
            dataType: 'html',
            success: function(output_string){
            $('#brand').html(output_string);
             } 
      }); 
   }, function() {
       $(this).closest('td').prev().html("<input type=\"text\" name=\"itemBrand[]\" id=\"itemBrand\" size=\"10\" placeholder=\"New Brand\" style=\"text-transform: uppercase\"/>");
 });

PHP：

  $sqlbrand = "SELECT BRD_Name FROM Brands ORDER BY BRD_Name asc";
  $resultbrand = odbc_exec($conn, $sqlbrand);
  ECHO "<select name='itemBrand[]' style='width:120px' size='1'>";
  while ($rowbrand = odbc_fetch_array($resultbrand)) {
      echo "<option value='".$rowbrand['BRD_Name']."'>".$rowbrand['BRD_Name']."</option>";
  }
  echo "</select></td>";

我非常愿意以不同的方式处理这个问题。我尝试了几种不同的方法，但无济于事。

感谢您提前获得有关此问题的任何帮助。

Answer 1

如果我看不到PHP文件，我就无法完全帮助你调试。

但是从HTML / JS我可以看到一个潜在的问题。您正在选择 $（“#brand”）并将html更改为output_string。但是当你克隆你的行时，你正在制作多个div， id 的#brand和 ids 应该是唯一的，你应该使用 class 而不是。

你能试试这个吗？

$('input[name="button"]').toggle(function() {
      var $this = $(this);
      $.ajax({
            url: 'http://localhost/brandDropdown.php',
            type:'POST',
            dataType: 'html',
            success: function(output_string){
                 $this.closest('td').prev().html(output_string);
            } 
      }); 
   }, function() {
       $(this).closest('td').prev().html("<input type=\"text\" name=\"itemBrand[]\" id=\"itemBrand\" size=\"10\" placeholder=\"New Brand\" style=\"text-transform: uppercase\"/>");
 });

Answer 2

在你的代码中（在小提琴中）

$(this).closest('td').prev().html(...)

应该是

$(this).closest('td').prev().find('#brand').html(...)

因为$(this).closest('td').prev().html(...)正在替换td的html，这意味着它只是从div中移除了#brand td ajax所以$('#brand').html(output_string); 1}}成功回调td无效，因为一旦你切换它就不在{{1}}内。

切换（功能）中的AJAX下拉列表仅适用一次

2 个答案: