如何基于另一个下拉列表使用下拉选项遍历每个td

时间:2019-05-03 18:13:49

标签: jquery

我有一个基于另一个下拉菜单的下拉菜单,我能够按需获得选项,但仅适用于第一个。我想遍历表中的所有td

它仅适用于第一行。我尝试使用Google搜索,但没有成功

这是我的HTML代码

 <html>
    <table id="Scenes_val" name="scenes-val-name" class="table table-striped table-hover table-sm" style="font-size:small;margin-top:-1px; ">
    <thead>
    <tr>
      <th>Track Id</th>
      <th>Error category <input type="checkbox" id="enable_errorSelector" onchange="select_error()" style="display: inline;margin-left: 20px" disabled> </th>
      <th>Sub Error category <input type="checkbox" id="enable_subErrorSelector" onchange="select_error()" style="display: inline;margin-left: 20px" disabled> </th>
      <th>Comments <input type="checkbox" id="enable_errorComment" onchange="select_comment()" style="display: inline;margin-left: 20px" disabled></th>
    </tr>
    </thead>
    <tbody id="Scenes_val">

        <script>
         var table = ''

        for(i=0; i<10; i++) {
          table += '<tr class = "track-row">'
          +'<td><input type="number" class="form-control Selector" name="items[]" min="1" required></td>'
          +'<td> <select class="form-control errorSelector" onchange="enable_errorSelector()" name = "errorSelector" id = "errorSelector">'
            +'<option value="">--------</option>'
            +'<option value="ET">Extend Track(Only moving labels)</option>'
            +'<option value="LNR">Label Not Required</option>'
            +'<option value="ML">Missclassified Label</option>'
            +'</select>'
          +'</td>'
          +'<td> <select class="form-control subErrorSelector" onchange="enable_subErrorSelector()" name = "subErrorSelector" id = "subErrorSelector">'
            +'<option value="blank">--------</option>'
            +'</select>'
          +'</td>'      
        +'<td><textarea rows="1" cols="50" class="form-control errorComment" onkeyup="enable_errorComment()"></textarea></td>'
        +'</tr> '

        }   
        document.write(table);
        </script>    
    </tbody>
    </table>
    '''

这是jQuery

function select_error(){
  var error_class = $(".errorSelector");
  var counter = 0;
  if($('#enable_errorSelector').prop("checked")){
    $("input[name='items[]']").each(function() {
    if($(this).val()!= ""){
      if($(error_class[counter]).val() == ""){

         $(error_class[counter]).val($(error_class[0]).val());
      }
    }
    counter++;
    });
  }
  else{
     $("input[name='items[]']").each(function() {
       counter++;
      $(error_class[counter]).val("");
    });
  }}

var ot_errors_sub_dic = {'ET':['Late Start','Early End','Late End','Early End'],'LNR':["Label Not Required"],'ML':["Wrong object type","SV marked as MV or MV marked as SV"]']}

var ot_errors_sub_val_dic = {'ET':['LS','EE','LE','EE'],'LNR':["LNR"],'ML':["WOT","SVMV"]}

  $('#errorSelector').on('change', function() {
   var selectValue = $(this).val();
   $('#subErrorSelector').empty();
   for (i = 0; i < ot_errors_sub_dic[selectValue].length; i++) {
      $('#subErrorSelector').append("<option value='" + ot_errors_sub_val_dic[selectValue][i] + "'>" + ot_errors_sub_dic[selectValue][i] + "</option>");
   }
});

0 个答案:

没有答案