javascript - 动态字段的可靠下拉菜单

Question

有人可以帮助我并给我一些线索

每当我单击“添加更多”时，我都会尝试添加可靠的下拉列表，但在我的情况下，第一个字段仅在我单击“添加更多”时才起作用，类别选项卡起作用，但它无法获取与我想要的方式相距甚远的设备，我想就像我单击设备将显示的类别一样，如果我单击添加更多，它会执行相同的功能

这是我的代码:

$bquery = $db->query("SELECT * FROM category ");
            $browCount = $bquery->num_rows;

                 <td><select class="form-control" id="category" name="category[]">
                 <option value="">---Select Category---</option>
                  <?php 
                if($browCount > 0){ 
            while($row = $bquery->fetch_assoc()){ 
                echo '<option value="'.$row['cat_id'].'">'.$row['cat_name'].'</option>';
                     }
                  }else{ echo  '<option value="">Category not available</option>'; }
                 ?></select></td>
                <td><select class="form-control" id="equipments" name="equipments[]">  <option value="">---Select
            Equipment---</option></select></td>

我的脚本

            <script>

            $(document).ready(function(){
              var i=1;

              $('#add').click(function(){
                i++;
                $('#dynamic_field').append('<tr id="row'+i+'"><td><select 
          class="form-control" id="category" name="category"><option
        value="">---Select Category---</option><?php 
                foreach ($Result as $col) {  ?>
                 <option value="<?php echo $col["cat_id"]; ?>"><?php echo $col["cat_name"]; ?></option> <?php }  ?>
     </select></td><td><select class="form-control" id="equipments" name="equipment "><option value="">---Select
        Equipment---</option></select></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();
              });
            });
            </script>

Answer 1

类别和装备的id属性必须唯一。

ID's are unique Each element can have only one ID Each page can have only one element with that ID

您可以更改您的代码，如下所示。

$('#add').click(function(){
            i++;
            $('#dynamic_field').append('<tr id="row'+i+'"><td><select 
      class="form-control"   onchange="categorychage(this,'+i+')" name="category"><option
    value="">---Select Category---</option><?php 
            foreach ($Result as $col) {  ?>
             <option value="<?php echo $col["cat_id"]; ?>"><?php echo $col["cat_name"]; ?></option> <?php }  ?>
 </select></td><td><select class="form-control" id="equipments'+i+'" name="equipment "><option value="">---Select
    Equipment---</option></select></td>> <td><button type="button"
    name="remove" id="'+i+'" class="btn btn-danger
    btn_remove">X</button></td></tr>');
         });

   $("row"+i).find("[name=category]").trigger("change");

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

更改事件操作将是单独的函数

function categorychage(cat,equipmentsid)
        {
            var catID = $(cat).val();
          if (catID) {
           $.ajax({
            type: 'POST',
            url: 'data.php',
            data: 'cat_id=' + catID,
            success: function(html) {
             $('#equipments').html(html);
            }
           });
          } else {
           $('#equipments'+equipmentsid).html('<option value="">Select Equipment First</option>');
          }
        }

如果你看一下代码，我已经删除了类别 id 属性，并通过附加“i”变量更改了每个类别的设备 id 属性。

希望这有帮助

您还需要更改此代码

<td><select class="form-control" id="category"  onchange="categorychage(this,0)" name="category[]">
             <option value="">---Select Category---</option>
              <?php 
            if($browCount > 0){ 
        while($row = $bquery->fetch_assoc()){ 
            echo '<option value="'.$row['cat_id'].'">'.$row['cat_name'].'</option>';
                 }
              }else{ echo  '<option value="">Category not available</option>'; }
             ?></select></td>
            <td><select class="form-control" id="equipments0" name="equipments[]">  <option value="">---Select
        Equipment---</option></select></td>