javascript - 如何使用相同的属性（ID 或类）从多个选择框中验证选定的值？

Question

如何使用相同的属性（ID 或类）验证多个选择框中的选定值？

您好问题解决者，我正在努力为我的多项选择下拉选项开发最佳验证方案。因此，我有一个表单功能，可以插入任意数量的动态选择框，只要单击该按钮，就会从 MySQL 数据库生成数据。

请看下面的GIF动画。

在此处输入图像描述

这是我创建添加/删除表单元素的 jQuery 代码：

$(document).on('click', '#add', function() {
            var data = '<tr><td width="40" align="center">'+window.globalCounter+'</td><td width="350"><select data-select="jenis_layanan" name="id_jenis_layanan['+window.globalCounter+']" id="id_jenis_layanan'+window.globalCounter+'" data-id="'+window.globalCounter+'" class="form-control required input-group" data-live-search="true" data-msg-required="Pilih layanan">'+ambil_data_jenis_layanan(window.globalCounter)+'</select></td><td width="70"><input type="text" name="kode_jenis_layanan['+window.globalCounter+']" id="kode_jenis_layanan" data-id="'+window.globalCounter+'" class="form-control input-sm" placeholder="Kode" readonly></td><td width="100"><input type="text" name="tarif_jenis_layanan['+window.globalCounter+']" id="tarif_jenis_layanan" data-id="'+window.globalCounter+'" class="form-control input-sm" placeholder="Tarif" readonly></td><td width="80"><input type="text" name="satuan_jenis_layanan['+window.globalCounter+']" id="satuan_jenis_layanan" data-id="'+window.globalCounter+'" class="form-control input-sm" placeholder="Satuan" readonly></td></td><td width="110"><input data-text="berat_jumlah" type="text" name="berat_jumlah['+window.globalCounter+']" id="berat_jumlah'+window.globalCounter+'" data-id="'+window.globalCounter+'" class="form-control required number input-sm" placeholder="Berat/Jumlah" data-msg-required="Wajib diisi" data-msg-number="Harus angka"></td></td><td width="150"><input type="text" name="subtotal['+window.globalCounter+']" id="subtotal'+window.globalCounter+'" data-id="'+window.globalCounter+'" class="form-control input-sm" placeholder="Subtotal" readonly></td><td width="40" align="center"><button type="button" class="btn btn-danger btn-sm" id="delete"><i class="glyphicon glyphicon-remove"></i></button></td></tr>';
    
            tableForm.find('tbody').append(data);
            window.globalCounter++;
    });

这是从 CodeIgniter 获取服务类型的函数：

// ambil data jenis layanan = retrieve type of laundry services 
function ambil_data_jenis_layanan(cnt = 0) {
    $.ajax({
        type: 'POST',
        url: "<?php echo base_url('CucianMasuk/ambil_data_jenis_layanan');?>",
        data: {},
        dataType: 'JSON',
        cache: false,
        success: function(response) {
            $('select#id_jenis_layanan'+cnt).html('');
            var option = '<option value="">Pilih Jenis Layanan</option>';
            for (var i = 0; i < response.length; i++) {
                option += '<option value="'+response[i]['id_jenis_layanan']+'">'+response[i]['nama_jenis_layanan']+'</option>';
            }
            $('select#id_jenis_layanan'+cnt).append(option).selectpicker('refresh');
        }
    });
}

这是用数据填充选择选项的代码：

public function ambil_detail_jenis_layanan() {
            $sql = $this->m_jenis_layanan->jenis_layanan($this->input->post('id'));
            echo json_encode(['kode_jenis_layanan' => $sql['kode_jenis_layanan'], 'tarif_jenis_layanan' => $sql['tarif_jenis_layanan'], 'satuan_jenis_layanan' => $sql['satuan_jenis_layanan']]);
    }

此当前代码用于验证每个动态生成的选择选项中的选定值：

// mengambil data jenis layanan berdasarkan pilihan pelanggan
        // https://stackoverflow.com/questions/45803813/jquery-select-box-multiple-option-get-value-and-match-values
        $(document).on('change', 'select[data-select=jenis_layanan]', function(){
            var dataid = $(this).attr('data-id'),
            id = $(this).val(),
            arr = [],
            jenisLayanan = [];
        
            $.each($('select[data-select=jenis_layanan] option:selected'), function(){
                arr.push($(this).val());
                jenisLayanan.push($(this).text());
            });
                    
            var values = $('select[data-select=jenis_layanan]').map(function() {
                return this.value;
            }).toArray();
        
            var hasDups = !values.every(function(v,i) {
                return values.indexOf(v) == i;
            });
        
            if(hasDups){
                    // if found duplicate selected values from 
                    // each select options, display such message
                    // later on planned to put in Bootstrap Modal 
                    // for more professional look
                alert('Sorry mate, this service already listed into the form: ' + jenisLayanan.join(', ') + '\n');
                return false;
            } else {
                    // if each selected values are not same from each select elements
                    // get data via AJAX and put in assigned HTML form elements
                    // and set the cursor focus to the berat_jumlah input box to let the user enter the weight of the laundry of number of clothes being laundry
                $.ajax({
                    type: 'POST',
                    url: "<?php echo base_url('CucianMasuk/ambil_detail_jenis_layanan');?>",
                    data: {id:id},
                    dataType: 'JSON',
                    cache: false,
                    success: function(response) {
                        tableForm.find('tbody tr td input#kode_jenis_layanan[data-id='+dataid+']').attr('value', response.kode_jenis_layanan);
                        tableForm.find('tbody tr td input#tarif_jenis_layanan[data-id='+dataid+']').attr('value', response.tarif_jenis_layanan);
                        tableForm.find('tbody tr td input#satuan_jenis_layanan[data-id='+dataid+']').attr('value', response.satuan_jenis_layanan);
                        tableForm.find('tbody tr td input#berat_jumlah'+dataid).focus();
                    }
                });
            }
        });

最后，我需要将所有数据保存到数据库中，但在选择元素验证时卡住了。非常感谢任何人都可以提供帮助。

标签： javascriptjquery