文章/答案/技术大牛

发布

社区首页 >问答首页 >不访问javascript / jQuery的动态HTML

问不访问javascript / jQuery的动态HTML
EN

Stack Overflow用户

提问于 2016-02-10 10:31:53

回答 3查看 145关注 0票数 0

我已经构建了HTML表，您可以在其中动态添加/删除行。添加和删除行很好，我遇到的问题是表由三列组成，其中的列有下拉式。我已经创建了一个脚本，第一个列下拉列表将从数据库中获取值，第三个列的下拉列表从数据库中获取在第一个下拉列表上选择的值。当您单击“添加行”按钮时，它可以在第一行上工作，但对附加的行不起作用。注意:我使用了一些旧代码和糟糕的sql编程标准。我使用他们只是为了理解，我将从那里采取必要的改变。

$(document).ready(function() {
  $.getJSON("getSolution.php", success = function(data) {
    var options = "";

    for (var i = 0; i < data.length; i++) {
      options += "<option>" + data[i] + "</option>";
    }

    $(".meetingPlace").append(options);
    $(".meetingPlace").change();
  });

  $(".meetingPlace").change(function() {

    $.getJSON("getSolutionPrice.php?make=" + $(this).val(), success = function(data) {
      var options = "";

      for (var i = 0; i < data.length; i++) {
        options += "<option>" + data[i] + "</option>";
      }

      $("#costing").html("");
      $("#costing").append(options);
    });
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-striped table-borderless table-header-bg test" id="quoteTable1">
  <tr><span class="center-block text-center" style="font-weight: bold">Inital Fee</span>
    <th class="text-center" style="width: 5%">D</th>
    <th class="text-center" style="width: 50%">Description</th>
    <th class="text-center" style="width: 15%">Units</th>
    <th class="text-center" style="width: 35%">Cost</th>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="chk[]">
    </td>
    <td>
      <select class="js-select form-control meetingPlace" name="initial_solution[]" style="width: 100%;" data-placeholder="Choose one..">
      </select>
    </td>
    <td class="hidden-xs">
      <select class="js-select form-control" id="example-select2" name="initial_quantity[]" style="width: 100%;" data-placeholder="Choose one..">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </td>
    <td>
      <select class="js-select form-control" id="costing" name="initial_solution1[]" style="width: 100%;" data-placeholder="Choose one..">
      </select>
    </td>
  </tr>
</table>

<div class="form-group text-center">
  <button class="btn btn-primary push-5-r push-10 plusbtn" type="button"><i class="fa fa-plus"></i> Add New Solution</button>&nbsp;&nbsp;
  <button class="btn btn-danger push-5-r push-10 minusbtn" type="button"><i class="fa fa-times"></i> Delete Solution</button>
</div>

<script>
  $(document).ready(function() {
    $('.plusbtn').click(function() {

      $(".test").append('<tr><td class="text-center"><input type="checkbox" name="chk[]"></td><td><select class="js-select form-control meetingPlace" name="initial_solution[]" style="width: 100%;" data-placeholder="Choose one.."></select></td><td class="hidden-xs"><select class="js-select form-control" id="example-select2" name="initial_quantity[]" style="width: 100%;" data-placeholder="Choose one.."><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></td><td><select class="js-select form-control" id="costing" name="initial_solution1[]" style="width: 100%;" data-placeholder="Choose one.."></select></td></tr>');
    });
    $('.minusbtn').click(function() {
      if ($(".test tr").length != 2) {
        $(".test tr:last-child").remove();
      } else {
        alert("You cannot delete first row");
      }
    });
  });
</script>

html

mysql

javascript

php

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-02-10 10:49:20

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
$(document).ready(function () {

    var options = "";

    $.getJSON("getSolution.php", function (data) {

        for (var i = 0; i < data.length; i++) {
            options += "<option>" + data[i] + "</option>";
        }

        $(".meetingPlace").append(options);
        $(".meetingPlace").change();

    });




    //options = "<option>Juice</option><option>22</option><option>33</option><option>44</option><option>55</option><option>66</option>";
    //$('.test tr:eq(1)').find('.meetingPlace').html("");
    //$('.test tr:eq(1)').find('.meetingPlace').append(options);

    $('.plusbtn').click(function () {
        $(".test").append('<tr><td class="text-center"><input type="checkbox" name="chk[]"></td><td><select class="js-select form-control meetingPlace" name="initial_solution[]" style="width: 100%;" data-placeholder="Choose one.."></select></td><td class="hidden-xs"><select class="js-select form-control" id="example-select2" name="initial_quantity[]" style="width: 100%;" data-placeholder="Choose one.."><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></td><td><select class="js-select form-control costing"  name="initial_solution1[]" style="width: 100%;" data-placeholder="Choose one.."></select></td></tr>');

        var options = "";

        $.getJSON("getSolution.php", function (data) {

            for (i = 0; i < data.length; i++) {
                options += "<option>" + data[i] + "</option>";
            }

            $('.test tr:last').find('.meetingPlace').html("");
            $('.test tr:last').find('.meetingPlace').append(options);

        });

    });


    $('.minusbtn').click(function () {
        if ($(".test tr").length != 2) {
            $(".test tr:last-child").remove();
        } else {
            alert("You cannot delete first row");
        }
    });




    $('#quoteTable1').on('change', '.meetingPlace', function () {

        var objSelect = $(this).closest('tr').find('td:last').find('.costing');
        var options = "";

        $.getJSON("getSolutionPrice.php?make="+$(this).val(), function (data) {

            for (i = 0; i < data.length; i++) {
                options += "<option>" + data[i] + "</option>";
            }
            $(objSelect).html("");
            $(objSelect).append(options);
        });
    });
});

<body>
    <table class="table table-striped table-borderless table-header-bg test" id="quoteTable1">
  <tr><span class="center-block text-center" style="font-weight: bold">Inital Fee</span>
    <th class="text-center" style="width: 5%">D</th>
    <th class="text-center" style="width: 50%">Description</th>
    <th class="text-center" style="width: 15%">Units</th>
    <th class="text-center" style="width: 35%">Cost</th>
  </tr>
  <tr>
    <td class="text-center">
      <input type="checkbox" name="chk[]">
    </td>
    <td>
      <select class="js-select form-control meetingPlace" name="initial_solution[]" style="width: 100%;" data-placeholder="Choose one..">
      </select>
    </td>
    <td class="hidden-xs">
      <select class="js-select form-control" id="example-select2" name="initial_quantity[]" style="width: 100%;" data-placeholder="Choose one..">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </td>
    <td>
      <select class="js-select form-control costing"  name="initial_solution1[]" style="width: 100%;" data-placeholder="Choose one..">
      </select>
    </td>
  </tr>
</table>

<div class="form-group text-center">
  <button class="btn btn-primary push-5-r push-10 plusbtn" type="button"><i class="fa fa-plus"></i> Add New Solution</button>&nbsp;&nbsp;
  <button class="btn btn-danger push-5-r push-10 minusbtn" type="button"><i class="fa fa-times"></i> Delete Solution</button>
</div>
 </body>
</html>

票数 0

Stack Overflow用户

发布于 2016-02-10 10:37:03

您需要做的更改很少，因为行是动态创建的，因此可以使用event委托注册更改事件处理程序。然后，在处理程序中，您需要找到第二个select元素，该元素与已更改的元素相关联--即同一行。

$(document).ready(function() {
  $.getJSON("getSolution.php", success = function(data) {
    var options = "";

    for (var i = 0; i < data.length; i++) {
      options += "<option>" + data[i] + "</option>";
    }

    $(".meetingPlace").append(options);
    $(".meetingPlace").change();
  });

  $("#quoteTable1").on('change', '.meetingPlace', function() {
    var $select = $(this);

    $.getJSON("getSolutionPrice.php?make=" + $select.val(), function(data) {
      var options = "";

      for (var i = 0; i < data.length; i++) {
        options += "<option>" + data[i] + "</option>";
      }

      $select.closest('tr').find(".costing").html(options);
    });
  })
});

因为元素的ID必须是唯一的，所以使用costing作为类而不是ID。

票数 0

Stack Overflow用户

发布于 2016-02-10 10:39:28

活动授权。

此代码：

$(".meetingPlace").change(function()

说明:将该函数分配给运行此代码时存在的所有".meetingPlace“元素。

新行在调用时不存在，因此它们不会得到事件。

相反，请使用：

$(document).on("change", ".meetingPlace", function() ...

它将适用于所有现有的和所有新的 ".meetingPlace“元素。

将修复问题中提出的问题，但您的代码可能会出现其他问题。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35312722

复制

相似问题

问不访问javascript / jQuery的动态HTML
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不访问javascript / jQuery的动态HTMLEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不访问javascript / jQuery的动态HTML
EN