Question

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

enter image description here

我的代码在这里

<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>

Answer 1

对于动态行，您应该使用.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>

Answer 2

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

更改

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

到

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

这意味着定位名称以 item 开头的select代码。
更改

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

到

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

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

DEMO （此链接只是为了让您了解它是如何工作的，并且AJAX已被评论，因为JSFiddle不会运行它。）

Answer 3

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

在您的情况下，您可以致电$(this).nextUntil(".price").val(data.price);

我对此不太确定，请告诉我们这是否有效。

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

3 个答案: