Question

我正在尝试根据预先设置的条件值（也是一个选择标记）在多个表行上设置2个选择标记的值。

我使用this question实现了它。但是，看看第一行是如何硬编码的;其余的是使用添加行功能动态创建的，只有第一行由后一个脚本处理。

我的目标是模拟第一行的功能（即在所有行上更改append w_cars, w_driver, d_cars, d_drivers to #car1, #driver1 when #water_type is changed respectively）。

我尝试使用上述脚本的定位而没有结果。由于问题保留了我对后端（Flask）的实现，我被迫同时拥有硬编码和动态行。

我已经包含完整的相关代码段;相关标签为#car1，#driver1，#water_type。

＆＃13;

var counter = 1;
jQuery('a.add_sales').click(function(event) {
    event.preventDefault();
    counter++;
    var newRow = jQuery(' <tr> <td> <input type="text" class="form-control" name="price1"></td><td> <input type="text" class="form-control" name="q1"></td><td> <select class="form-control" name="car1" id="car1"> </select></td><td> <select class="form-control" name="driver1" id="driver1">  </select></td><td><select class="form-control" name="water_type"><option value="w">w</option><option value="d">d</option></select></td><td> <input type="text" class="form-control" name="client1"></td></tr>');
    jQuery('table.daily_list').append(newRow);
    document.getElementById("counter").value = counter;
});

var options = {
    w_cars: ["102", "103", "104", '106'],
    w_driver: ["Mouse", "Cat", "Jerry", "Tom"],
    d_cars: ["H-101", "H-102", "H-103"],
    d_driver: ["Apple", "Lemon"]
};

$(function(){
    $('#water_type').change(function() {
        var x= $('#water_type :selected').val();
        var driver = x + "_driver"
        $('#driver1').html("");
        for(index in options[driver]) {
            $('#driver1').append('<option value="' + options[driver][index] + '">' + options[driver][index] + '</option>')
        };
    });

    $('#water_type').change(function() {
        var x= $('#water_type :selected').val();
        var car = x + "_cars"
        $('#car1').html("");
        for(index in options[car]) {
            $('#car1').append('<option value="' + options[car][index] + '">' + options[car][index] + '</option>')
        };
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="taskTable" class="daily_list table table-hover table-striped">
  <thead>
    <th>Price</th>
    <th>Q</th>
    <th>Car</th>
    <th>Driver</th>
    <th>Type</th>
    <th>Client</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="form-control" name='price1'>
      </td>
      <td>
        <input type="text" class="form-control" name='q1'>
      </td>
      <td>
        <select class="form-control" name="car1" id='car1'>
        </select>
      </td>
      <td>
        <select class="form-control" name="driver1" id='driver1'>
        </select>
      </td>
      <td>
        <select class="form-control" id="water_type" name="water_type">
          <option value="w">w</option>
          <option value="d">d</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" name='client1'>
      </td>
    </tr>
    <input id='counter' type='hidden' value="" name='counter'>
  </tbody>
  <div class="col-md-6">
    <div class="form-group">
      <label>date</label>
      <input id="date" class="form-control" type="date" name='date'>
    </div>
    <a class="add_sales btn btn-success btn-fill pull-right" href="#">Add Row</a>
    <div class="clearfix"></div>
  </div>
</table>

＆＃13;

为动态创建的表格行

0 个答案: