Question

我有一个表，该表动态创建带有两个下拉列表的行。一个用于主题，另一个用于主题。从表的下拉列表的第一行中选择主题值时，它将通过使用laravel从数据库进行Ajax调用，在同一行的第二个下拉列表中使用适当的主题名称和ID填充主题下拉列表

def create_data_set(_data_set, _look_back=1):
    data_x, data_y = [], []
    for i in range(len(_data_set) - _look_back - 1):
        a = _data_set[i:(i + _look_back), 0]
        data_x.append(a)
        data_y.append(_data_set[i + _look_back, 0])
    return np.array(data_x), np.array(data_y)

pathToFile = './dl.txt'
dataset = pd.read_csv(pathToFile, sep=' ', header=None, usecols=(1,2), names=['date', 'numbers'])
dataset = dataset['numbers'].values
parsedDataset = []
for i in dataset:
    parsedDataset.append(i.split(','))
dataset = parsedDataset
dataset = np.array(dataset)
dataset.astype('float64')

scaler = MinMaxScaler(feature_range=(0, 1))
dataset = scaler.fit_transform(dataset)
train, test = train_test_split(dataset, test_size=0.30, random_state=40)
train_x, train_y = create_data_set(train, 1)
test_x, test_y = create_data_set(test, 1)
print(train_x.shape[0])
train_x = np.reshape(train_x, (train_x.shape[0],1, train_x.shape[1]))
test_x = np.reshape(test_x, (test_x.shape[0], 1, test_x.shape[1]))

model = Sequential()
model.add(LSTM(256, input_shape=(train_x.shape[1], train_x.shape[2]),return_sequences=True))
model.add(LSTM(128))
model.add(Dense(6))
model.compile(loss='mse', optimizer='adam',metrics=['acc'])
model.fit(train_x, train_y, epochs=3, batch_size=1, verbose=0)
trainPredict = model.predict(train_x)
testPredict = model.predict(test_x)

trainPredict = scaler.inverse_transform(trainPredict)
train_y = scaler.inverse_transform([train_y])
testPredict = scaler.inverse_transform(testPredict)
test_y = scaler.inverse_transform([test_y])
for i in range(testPredict.shape[1]):
        print("%.1f"%(testPredict[0,i]), end=' ')
print('\n',end="")

 $('.addRow').on('click' ,function () {
                    addRow();
                });

                function addRow() {

                    var  tr =
                        '<tr>' +
                        '<td>' +
                        '<select class="form-control subject_selected" name="subject[]" id="subject">' +
                        '<option value=" ">--Select Subject-----</option>' +
                        "@foreach($subject_list as $subject)" +
                        "<option value='{{ $subject-> id }}'>{{ $subject -> SubjectName }}</option>" +
                        "@endforeach"+
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<select class="form-control topic_selected" name="topic[]" id="topic">' +
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<input type="text" class="form-control" name="Amount[]" id="Amount"/>'+
                        '</td>' +
                        '<td>' +
                        '<a href="javascript:void(0)"  class="btn btn-danger remove">X</a>' +
                        '</td>' +
                        '</tr>';
                    $('tbody').append(tr);

                }
                
                                $(document).on('change','.subject_selected' ,function () {
                    var SubjectID = $(this).val();

                    if(SubjectID){
                        $.ajax({
                            url: "{{ url('/topics') }}" + '/' + SubjectID,
                            typee: "GET",
                            dataType: "json",
                            success: function (data) {

                                $('.topic_selected').empty();
                                $.each(data,function (key , value) {
                                     console.log("Key" + key ,"Value" + value);
                                    $('.topic_selected').append('<option value="' + key + '">' + value+ '</option>');
                                });

                            },
                            error: function (data) {
                                console.log(data)
                            }
                        })
                    }else {
                        $('.topic_selected').empty();
                    }
                });

。但是问题是当添加新行时出现的，那么在这里我将有两行具有四个相同的下拉列表，但是当我尝试从第二行更改主题名称时，会导致两个主题行（即第一行和第二个，依此类推。那么我将如何实现呢？我希望每一行都依靠自己，即当我从第二行中选择一个主题时，不得随第一行中的主题发生变化。

Answer 1

我们可以添加一个与（主题/主题）的每个列表匹配的通用唯一标识符。然后使用该标识符选择唯一的目标列表。在这里，我使用的是属性“ data-uid”

我正在重复使用您的“代码段”来解决问题！但是仍然没有人可以在这里执行这样的代码:) 要查看实际效果，您可以访问此处底部的jSfiddle链接。

var counter=0;
$('.addRow').on('click' ,function () {
                    addRow();
                });

                function addRow() {

                    var  tr =
                        '<tr>' +
                        '<td>' +
                        '<select class="form-control subject_selected" name="subject[]" id="subject" data-uid="'+(counter+1)+'">' +
                        '<option value=" ">--Select Subject-----</option>' +
                        "@foreach($subject_list as $subject)" +
                        "<option value='{{ $subject-> id }}'>{{ $subject -> SubjectName }}</option>" +
                        "@endforeach"+
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<select class="form-control topic_selected" name="topic[]" id="topic" data-uid="'+(counter+1)+'">' +
                        '</select>' +
                        '</td>' +
                        '<td>' +
                        '<input type="text" class="form-control" name="Amount[]" id="Amount"/>'+
                        '</td>' +
                        '<td>' +
                        '<a href="javascript:void(0)"  class="btn btn-danger remove">X</a>' +
                        '</td>' +
                        '</tr>';
                    $('tbody').append(tr);
counter++;
                }
                
                                $(document).on('change','.subject_selected' ,function () {
                    var SubjectID = $(this).val();
var targ=$(this).data('uid');
                    if(SubjectID){
                        $.ajax({
                            url: "{{ url('/topics') }}" + '/' + SubjectID,
                            typee: "GET",
                            dataType: "json",
                            success: function (data) {

                    
                    
$('.topic_selected[data-uid="' + targ + '"]').empty();
$.each(data,function (key , value) {
console.log("Key" + key ,"Value" + value);
$('.topic_selected[data-uid="' + targ + '"]').append('<option value="' + key + '">' + value+ '</option>');
           });

                            },
                            error: function (data) {
                                console.log(data)
                            }
                        })
                    }else {
                        $('.topic_selected').empty();
                    }
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="table_tuition_fee">
                                                    <thead>
                                                         <tr>
                                                             <td><label for="subject">Subject</label></td>
                                                             <td><label for="topic">Topic</label></td>
                                                             <td><label for="Amount">Amount</label></td>
                                                             <td><a class="bg-light btn btn-info addRow" href="#"><i class="fa fa-plus"></i></a></td>
                                                         </tr>
                                                    </thead>
                                                     <tbody>
                                                         <tr>
                                                             <td>
                                                                 <select class="form-control subject_selected" name="subject[]" id="subject"  data-uid="0">
                                                                     <option value=" ">---Select Subject---</option>
                                                                     @foreach($subject_list as  $subject)
                                                                         <option value="{{ $subject->id }}">{{ $subject->SubjectName }}</option>
                                                                     @endforeach
                                                                 </select>
                                                             </td>
                                                             <td>
                                                                 <select class="form-control topic_selected" name="topic[]" id="topic"  data-uid="0">
                                                                 </select>
                                                             </td>
                                                             <td>
                                                                 <input type="text" class="form-control" name="Amount[]" id="Amount"/>
                                                             </td>
                                                             <td>
                                                                 <a href="javascript:void(0)"  class="btn btn-danger remove">X</a>
                                                             </td>
                                                         </tr>
                                                     </tbody>
                                                   <tfoot>
                                                       <tr>
                                                           <td style="border: none"></td>
                                                           <td style="border: none"></td>
                                                           <td style="border: none"></td>
                                                           <td><button class="btn btn-success" id="add_student">SEND</button></td>
                                                       </tr>
                                                   </tfoot>
                                               </table

在这个小提琴中，我使用数组替换Ajax数据响应：https://jsfiddle.net/f4ao1rwq/ 您会注意到应该添加到代码中的更改才能正常工作。

如何防止具有两个下拉菜单的表的第一行在更改时动态更改第二个下拉菜单的值？

1 个答案: