Question

我正在使用核心php开发计费软件

我需要带有添加更多按钮的可搜索选择标签

我已经使用引导程序创建了添加选择

<html>

<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>

<div class="container">
  <div class="row">
    <h2>Bootstrap-select example</h2>
    <p>This uses <a href="https://silviomoreto.github.io/bootstrap-select/">https://silviomoreto.github.io/bootstrap-select/</a>
    </p>
    <hr />
  </div>

  <div class="row-fluid">
    <tbody>
      <tr>
        <td>
          <h4>1</h4>
        </td>
        <td class="text-semibold text-dark">
          <select class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="getModel(this.value);" name="products">
            <option value="" disabled selected>Choose Products</option>
            <?php include "inc/db-connect.php"; $qryyy=m ysqli_query($conn, "SELECT * FROM `products`"); if (mysqli_num_rows($qryyy)> 0) { // output data of each row while($rowpro = mysqli_fetch_assoc($qryyy)) { ?>
            <option data-subtext="(INR <?php echo $rowpro['price']; ?>/-)" value="<?php echo $rowpro['id']; ?>">
              <?php echo $rowpro[ 'pname']; ?>
            </option>
            <?php }} else { ?>
            <option value="" data-subtext=" first!!!">
              <?php echo "Please add products"; ?>
            </option>
            <?php } ?>
          </select>
        </td>
        <td>
          <label id="model-list" style="padding-left: 100px;"></label>
        </td>
        <td>
          <input type="number" name="qty" id="qty" min="1" style="width:70px;">
        </td>
        <td>
          <input type="number" name="price" id="price" min="1" style="width:70px;" readonly>
        </td>
        <td>
          <button type="button" name="add" id="add" class="btn btn-success">Add More</button>
        </td>
      </tr>
    </tbody>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

</html>

上面的代码工作正常，但是当我插入时添加更多的javascript 然后添加更多脚本的下一个结果中缺少css

<script>
  $(document).ready(function() {
        var i = 1;
        $('#add').click(function() {
          i++;
          $('#dynamic_field').append('<tr id="row' + i + '"><td><h4>' + i + '</h4></td><td class="text-semibold text-dark"><select class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="getModel(this.value);" name="products"><option value="" disabled selected>Choose Products</option><?php 
            include "inc/db-connect.php"; $qryyy = mysqli_query($conn, "SELECT * FROM `products`");
            if (mysqli_num_rows($qryyy) > 0) {
              // output data of each row
              while ($rowpro = mysqli_fetch_assoc($qryyy)) { ?>
                < option data - subtext = "(INR <?php echo $rowpro['price']; ?>/-)"
                value = "<?php echo $rowpro['id']; ?>" > <? php echo $rowpro['pname']; ?> < /option><?php 
              }
            } else { ?>
              < option value = ""
              data - subtext = " first!!!" > <? php echo "Please add products"; ?> < /option><?php } ?> < /select > < /td > < td > < label id = "model-list"
              style = "padding-left: 100px;" > < /label></td > < td > < input type = "number"
              name = "qty"
              id = "qty"
              min = "1"
              style = "width:70px;" > < /td><td><input type="number" name="price" id="price" min="1" style="width:70px;" readonly></td > < td > < button type = "button"
              name = "remove"
              id = "'+i+'"
              class = "btn btn-danger btn_remove" > X < /button></td > < /tr>');
            });

          $(document).on('click', '.btn_remove', function() {
            var button_id = $(this).attr("id");
            $('#row' + button_id + '').remove();
          });

          $('#submit').click(function() {
            $.ajax({
              url: "name.php",
              method: "POST",
              data: $('#add_name').serialize(),
              success: function(data) {
                alert(data);
                $('#add_name')[0].reset();
              }
            });
          });

        });
</script>

我知道我的英语太糟糕了，但是如果有人能听懂我的语言，我需要帮助，然后请帮助我... 或者只是提出其他解决方法... ................................................... ............................

编辑：Codepen演示：https://codepen.io/singhviku/pen/JzyBVZ

使用Bootstrap Select创建添加更多按钮JavaScript

0 个答案: