jquery在每行选择选项上动态添加行显示价格表格db

Posted 2023-05-09

【中文标题】jquery在每行选择选项上动态添加行显示价格表格db

【英文标题】：jquery dynamic added row display price form db on each row select option

【发布时间】：2014-06-12 18:22:11

【问题描述】：

您好，我在 jquery 任务中需要一些帮助，我创建了带有动态行添加的表。我希望当我选择选项值时，此价格显示在这一行的下一列中，每行中选择的选项值都会不同

我的代码在这里

<script type="text/javascript">
$(".name").change(function()
    
    var id=$(this).val();
    var dataString = 'id='+ id;

    $.ajax
    (
        type: "POST",
        url: "test.php",
        data: dataString,
        cache: false,
        dataType:"json",
        success: function(data)
        
            $(".price").val(data.price);
            return false;
         
   );
);
</script>

html：

<table>
  <tr>
    <th>
      select item
    </th>
    <th>
      price
    </th>
  </tr>
  <tbody>
    <td>
      <select name="item[]">
        <option value="1">
          item name
        </option>
      </select>
    </td>
    <input type"text" name="price[]">
    <td>
    </td>
  </tbody>
</table>

【问题讨论】：

您也可以粘贴您的 HTML 吗？

表>

选择商品	价格
商品名称

【参考方案1】：

从图片看起来你会几个下拉菜单旁边有文本框，你想分别加载每个项目的价格，因为你需要做的事情：

改变

$(".name").change(function()

到

$("select[name^='item']").change(function()

这意味着定位一个名称以 item 开头的select 标签。

改变

$(".price").val(data.price);

到

$(this).closest('tr').find("input[name^='price']").val(data.price);

这意味着我们找到最接近select 的tr 标记，然后找到名称以price 在 tr 标记开头的input ，因此您的选择下拉值始终存储在下一个文本框中。

DEMO（这个链接只是为了让你了解它是如何工作的，AJAX 被注释了，因为 JSFiddle 不会运行它）。

【参考方案2】：

对于动态行，您应该使用.on 方法。为元素添加一些类，以便轻松找到它们。

这段代码应该可以工作：

<table id="unit-price">
   <tr>
      <th>
         select item
      </th>
      <th>
         price
      </th>
   </tr>
   <tbody>
      <tr>
         <td>
            <select class="name" name="item[]">
               <option value="1">item name</option>
            </select>
         </td>
         <td>
            <input type="text" class="price" name="price[]">
         </td>
      </tr>
   </tbody>
</table>

<script type="text/JavaScript">
    $("#unit-price").on('change', '.name', function () 
        var $this = $(this);
        $.ajax(
            type : "POST",
            url : "test.php",
            data : 
                id : $this.val()
            ,
            cache : false,
            dataType : "json",
            success : function (data) 
                $this.parent()
                    // Get parent tr
                    .closest('tr')
                    // Then, find price textbox with class 'price'
                    .find('.price').val(data.price);
            
        );
    );
</script>

【讨论】：

+1 我忘记了.on。 @OP 如果你有动态下拉菜单，你应该使用这个change 方法。

【参考方案3】：

我认为您可以使用 jQuery 的 nextUntil() 函数解决您的问题。

在你的情况下，你可以打电话给$(this).nextUntil(".price").val(data.price);

我不太确定这个，所以让我们知道这是否有效。