Javascript - 使用2个动态选择标签添加更多按钮功能

时间：2017-03-02 10:39:20

标签： javascript php jquery ajax

我有2个选择框（Class＆amp; Section）。当我选择一个类时，第二个选择框通过AJAX从另一个文件中获取相关章节的动态列表。它运作良好。我添加了（Add More Class Btn）和JS功能，它创建了相同的2个选择框（Class＆amp; Section）。选择班级后，由于ID相同，我无法获得相关章节。

这是我的 PHP 代码：

        <?php
            include('dbConfig.php');
            $query = $db->query("SELECT * FROM classes ");
            $rowCount = $query->num_rows;
        ?>

        <div class="input_fields_wrap">
            <button class="add_field_button btn btn-sm btn-primary">Add More Classes</button><br><br>
            <div class="row">
                <div class="col-md-6">
                    <label>Class</label>
                    <select name="class[]" id="class" class="form-control" style="width:150px;" required >
                        <option value="">Select Class</option>
                        <?php
                        if($rowCount > 0){
                            while($row = $query->fetch_assoc()){ 
                                echo '<option value="'.$row['id'].'">'.$row['class'].'</option>';
                            }
                        }else{
                            echo '<option value="">No Class Available</option>';
                        }
                        ?>
                    </select><br>
                </div>

                <div class="col-md-6">
                    <label>Section</label>
                    <select id="section" name="section[]" class="form-control" style="width:150px;" required >
                    <option value="">Select Class first</option>
                    </select>
                </div>
            </div><br>
        </div>

这是我的 JS 代码：

<script>
  $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 0; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(
            '<div class="row"><div class="col-md-6"><label>Class</label><select name="class[]" id="class" class="form-control" style="width:150px;" required ><option value="">Select Class</option><?php $query = $db->query("SELECT * FROM classes "); $rowCount = $query->num_rows;
                    if($rowCount > 0){
                        while($row = $query->fetch_assoc()){ 
                            echo '<option value="'.$row['id'].'">'.$row['class'].'</option>';
                        }
                    }else{
                        echo '<option value="">No Class Available</option>';
                    }
                    ?>
                </select></div><div class="col-md-6"><label>Section</label><select id="section" name="section[]" class="form-control" style="width:150px;" required ><option value="">Select Class first</option></select></div><a href="#" class="remove_field">Remove</a></div><br>'); //add box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

<script type="text/javascript">
    $(document).ready(function(){
        $('#class').on('change',function(){
            var Class = $(this).val();
            if(Class){
                $.ajax({
                    type:'POST',
                    url:'get_sections.php',
                    data:'id='+Class,
                    success:function(html){
                        $('#section').html(html);
                    }
                }); 
            }else{
                $('#section').html('<option value="">Select Class first</option>');
            }
        });
    });
</script>

这是我的 get_sections.php 代码：

include('dbConfig.php');

if (isset($_POST["id"]) && !empty($_POST["id"])){
  //Get all Section Data
  $query = $db->query("SELECT * FROM sections WHERE class_id = ".$_POST['id']." ORDER BY section ASC");

  //Count total number of rows
  $rowCount = $query->num_rows;

  //Display Section list
  if($rowCount > 0){
    echo '<option value="">Select Section</option>';
    while($row = $query->fetch_assoc()){ 
      echo '<option value="'.$row['id'].'">'.$row['section'].'</option>';
    }
  }else{
    echo '<option value="">No Section Available</option>';
  }
}

请通过获取JS生成的Selected Class Sections来帮助我。

3 个答案:

答案 0 :(得分：0)

  1. 这里你多次使用'#class'。不要使用相同的“ID”多个
    时间。

  2. 如果你通过jquery操作添加/追加html，同样的jquery函数不能用于新添加的html。但一个简单的改变可以解决问题。 

    <script type="text/javascript">
$(document).ready(function(){
    $(document).on('change','#class',function(){
        var Class = $(this).val();
        if(Class){
            $.ajax({
                type:'POST',
                url:'get_sections.php',
                data:'id='+Class,
                success:function(html){
                    $('#section').html(html);
                }
            }); 
        }else{
            $('#section').html('<option value="">Select Class first</option>');
        }
    });
});

答案 1 :(得分：0)

它很简单，因为你不能指望，首先你必须生成随机唯一ID（添加更多类和部分）

  var uniqueId = function() {
      return 'id-' + Math.random().toString(36).substr(2, 16);
    }

我通过插入uniqueId（）函数来更新代码，该函数将生成元素的唯一ID并注入指令（id =“+ un_id +”）并在Onchange事件上添加getlist（）函数

$(add_button).click(function(e){ //on add input button click
var un_id=uniqueId ();
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(
            '<div class="row"><div class="col-md-6"><label>Class</label><select name="class[]" id="+un_id+" class="form-control" onchange="getlist(this)" style="width:150px;" required ><option value="">Select Class</option><?php $query = $db->query("SELECT * FROM classes "); $rowCount = $query->num_rows;
                    if($rowCount > 0){
                        while($row = $query->fetch_assoc()){ 
                            echo '<option value="'.$row['id'].'">'.$row['class'].'</option>';
                        }
                    }else{
                        echo '<option value="">No Class Available</option>';
                    }
                    ?>
                </select></div><div class="col-md-6"><label>Section</label><select id="section" name="section[]" class="form-control" style="width:150px;" required ><option value="">Select Class first</option></select></div><a href="#" class="remove_field">Remove</a></div><br>'); //add box
        }
    });

现在，当您从自定义选择元素

中选择值时，您将需要唯一地标识select元素 
function getlist(obj){
     var Class =obj.val();
                if(Class){
                    $.ajax({
                        type:'POST',
                        url:'get_sections.php',
                        data:'id='+Class,
                        success:function(html){
                            $('#section').html(html);
                        }
                    }); 
                }else{
                    $('#section').html('<option value="">Select Class first</option>');
                }
            });
}

看到这个实例 

var uniqueId = function() {
      return 'id-' + Math.random().toString(36).substr(2, 16);
    }
function add(){
var id=uniqueId();
 document.getElementById("custom").innerHTML +="<select id='"+id+"' onchange='getname(this)' ><option value='india'>India</option><option value='mumbai'>Mumbai</option></select>"; 
}

function getname(obj){
alert(obj.value);
}
<html>
<body>
<button onclick="add()">ADD</button>
<div id="custom">

</div>
</body>
</html>

答案 2 :(得分：0)

  1. 你在HTML和jQuery中重复一遍 - 类是相同的，你应该克隆div。
  2. 如果您不使用id =“class”，您可以根据需要克隆
  3. Class是保留字。不要将它用作变量

    4. 将id="class" class="form-control"更改为 class="form-control classSel"

    以下是如何更改代码的建议。您可能必须修复拼写错误或语法错误。没有你的后端，我无法测试我的代码。

    $(function() {
  var max_fields = 10; //maximum input boxes allowed
  var x = 0; //initial text box count
  var $wrapper = $(".input_fields_wrap"); //Fields wrapper
  var $add_button = $(".add_field_button"); //Add button ID

  $add_button.click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $wrapper.append($(".row").eq(0).clone());
    }
  });
  $('.classSel').on('change', function() {
    var thisClass = $(this).val(),
      $thisSection = $(this).closest("div").next().find("select");
    if (thisClass) {
      $.ajax({
        type: 'POST',
        url: 'get_sections.php',
        data: 'id=' + thisClass,
        success: function(html) {
          $thisSection.html(html);
        }
      });
    } else {
      $thisSection.html('<option value="">Select Class first</option>');
    }
  });
});

相关问题
最新问题