2

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

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

下拉列表是通过 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>";

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

预先感谢您对此问题的任何帮助。

4

2 回答 2

2

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

但是从 HTML/JS 我可以看到一个潜在的问题。您正在选择$("#brand")并将 html 更改为 output_string。但是当你克隆你的行时，你会创建多个id为 #brand 的 div，并且id应该是唯一的，你应该使用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\"/>");
 });
于 2012-11-20T18:56:27.413 回答
0

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

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

应该

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

because $(this).closest('td').prev().html(...) is replacing the html of td which means it's just removing the div with id #brand from within the td so in your ajax success callback $('#brand').html(output_string); is not working because it's not inside the td once you toggled it.

于 2012-11-20T19:15:00.137 回答