时间戳

首页 > 解决方案 > 如何在 Jquery 中获取 ID 动态？

javascript - 如何在 Jquery 中获取 ID 动态？

问题描述

我正在做动态输入，当用户点击“ Add From Checklist ”时会有一个输入表单，如果再次点击“Add From Checklist”，那么输入表单就会变成两个，依此类推，对于实际的选择代码，已经有数据了例如' 1-022020-001 '，现在用于输入站点和设备，数据是值' 1-022020-001 '在数据库中的位置，现在我仍然对如何从值' 1获取结果感到困惑-022020-001 ' 可以发送给控制器，返回给js显示输入的Station and Equipment。

演示：

var html = '';
    $('.btnSend').attr('disabled', true);

    $("#inputCode, #inputStasiun, #inputPeralatan").select2({
        placeholder: "Choose one",
        allowClear: true
    });

    var runNumberAdd = 1;
    $("#add-more").click(function() {
        html =
        '<div class="col-sm-6 control-group">'+
            '<div class="panel panel-default" style="padding: 10px;">'+
                '<div class="form-horizontal">'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Tanggal</label>'+
                        '<div class="col-sm-10">'+
                            '<input name="inputTgl[]" type="date" id="inputTglClone'+ runNumberAdd +'" class="form-control inputTglClone">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Code</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputCode[]" id="inputCodeClone'+ runNumberAdd +'" class="form-control select2 inputCodeClone">'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Stasiun</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputStasiun[]" id="inputStasiunClone'+ runNumberAdd +'" class="form-control select2 inputStasiunClone">'+
                            '</select>'+
                            '<input name="inputStasiunHidden[]" type="text" id="inputStasiunHiddenClone'+ runNumberAdd +'" class="form-control inputStasiunHiddenClone">'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Peralatan</label>'+
                        '<div class="col-sm-10">'+
                            '<select name="inputPeralatan[]" id="inputPeralatanClone'+ runNumberAdd +'" class="form-control select2 inputPeralatanClone">'+
                            '</select>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Deskripsi</label>'+
                        '<div class="col-sm-10">'+
                            '<textarea name="inputDeskripsi[]" id="inputDeskripsiClone'+ runNumberAdd +'" class="form-control inputDeskripsiClone"></textarea>'+
                        '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                        '<label class="col-sm-2 control-label">Resume</label>'+
                        '<div class="col-sm-10">'+
                            '<label class="radio-inline">'+
                                '<input type="radio" name="inputChecklist[]" id="inputChecklist1Clone'+ runNumberAdd +'" class="inputChecklist1Clone'+ runNumberAdd +'" value="1"> OK'+
                            '</label>'+
                            '<label class="radio-inline">'+
                                '<input type="radio" name="inputChecklist[]" id="inputChecklist2Clone'+ runNumberAdd +'" class="inputChecklist2Clone'+ runNumberAdd +'" value="0"> NOK'+
                            '</label>'+
                            '<div class="pull-right">'+
                                '<button type="button" class="btn btn-danger btn-sm remove_list"> Hapus From Checklist</button>'+
                            '</div>'+
                        '</div>'+
                    '</div>'+
                '</div>'+
            '</div>'+
        '</div>';
        $('.clone-form').append(html);
        $(".inputCodeClone, .inputStasiunClone, .inputPeralatanClone").select2({
            placeholder: "Choose one",
            allowClear: true
        });
        $.ajax({
            url   : 'showDataCode',
            dataType : 'JSON',
            async : true,
            success : function(data) {
                var minrunNumberAdd = runNumberAdd - 1;
                var attrCode = '#inputCodeClone' + minrunNumberAdd;
                $(attrCode).append($("<option selected disabled></option>").attr("value", '').text('')); 
                $.each(data, function(key, value) {   
                    $(attrCode).append($("<option></option>").attr("value", value.id).text(value.code)); 
                });
            }
        });
        $('.btnSend').attr('disabled', false);
        $('.inputStasiunClone').attr("disabled", true);
        $('.inputPeralatanClone').attr("disabled", true);
        runNumberAdd++;
    });
    
    $("body").on("click", ".remove_list",function() {
        var numItems = $('.control-group').length;
        $(this).parents(".control-group").remove();
        if (numItems == 1) {
            $('.btnSend').attr('disabled', true);
        } else {
            $('.btnSend').attr('disabled', false);
        }
    });
    
    
    
    
    // How to get attribut ID
    // My Xample
    $('input[id^="inputCodeClone"]').on('click', function() { 
        alert('A');
    });
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="box-header">
                    <div class="pull-right">
                        <button type="button"  id="add-more" class="btn btn-success btn-sm"> Tambah From Checklist</button>
                    </div>
                </div>
                <form action="<?= base_url('GeneralFormChecklist/submitChecklist'); ?>" method="post" id="formInput">
                    <div class="box-body">
                        <div class="clone-form">
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary btn-sm btnSend">Kirim Checklist</button>
                        </div>
                    </div>
                </form>

数据库中的样本数据 1

问题是：

  1. 以后如何通过选择code as where in database来显示输入站中的id_location和输入设备中的id_equipment_name？

注意： 我在查找动态 ID 时遇到的代码

标签： javascriptphpjquerycodeigniter

解决方案

如果您想获取您单击的当前输入或所有最近输入的值，则可以使用 $(this)。它可以帮助您指向当前聚焦或单击的元素。

推荐阅读