drob50257447
drob50257447
2019-03-11 09:13

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

I'm developing billing software in core php

i need searchable select tag with add more button

i had created add select using bootstrap

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

Above code is working fine but when i had inserted add more javascript then css is missing from next result of add more script

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

I know my english is too bad, but i need help if any one can understand with my language then please help me out from this... Or just suggest other way to go through it... ..............................................................................

EDIT : Codepen Demo : https://codepen.io/singhviku/pen/JzyBVZ

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • douou1891 douou1891 2年前

    You should add the following code, $('.selectpicker').selectpicker('refresh'); after the code of add dynamic fields.

    $(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><option data-subtext="(INR 450/-)" value="1">Hello 1</option><option data-subtext="(INR 450/-)" value="2">Hello 2</option></select></td><td><input type="number" name="rate" id="rate" min="1" style="width:70px;"></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>');
        });
        // Refresh element
        $('.selectpicker').selectpicker('refresh');
    });
    

    .selectpicker('refresh') Function describes below in official documentation

    To programmatically update a select with JavaScript, first, manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

    I have added codepen updated code.

    https://codepen.io/anon/pen/ZPJqGV

    点赞 评论 复制链接分享
  • dphj737575 dphj737575 2年前

    Your dynamically added HTML will not have selectpicker initialization. Thus you need to forcefully call selectpicker after appending HTML as below:

    $('#dynamic_field').find(".selectpicker:last").selectpicker();
    

    Use this code after you append your HTML code. Check selectpicker function, if it is not correct, change it according to your jQuery library.

    Hope it helps you.

    点赞 评论 复制链接分享

相关推荐