Select does not work in chrome or works every other time, everything is fine in IE. Where is the mistake?

Question

JavaScript

There is a table

<table  class='live_filter'  width=97% border=1 align=center cellpadding=5 cellspacing=0 bordercolorlight=gray bordercolordark=white>
   <thead>
   <tr class=tableheadercat align="center">
        <th width="3%"><p class=zagtable>№ п/п</p></th>
        <th width="24%"><p class=zagtable>ФИО автора(-ов)</p></th>
          
        <th width="33%"><p class=zagtable>Наименование книги</p></th>  
        
        <th width="5%"><p class=zagtable>Год издания<?php 
                      $quer = "SELECT DISTINCT `year_book` FROM `book` ORDER BY `year_book` ASC";
                        //Выполняю запрос
                      $kaf_q = mysql_query ( $quer );
                        //В цикле заполняю массив из кафедр
                      echo "<select id='digit'><option value=''>---</option>";
                      while ( $newb = mysql_fetch_object( $kaf_q ) ) {
                     	echo "<option value='$newb->year_book'>$newb->year_book</option>";
                      }
                      echo "</select>";?> </p>
        
        
        </th>
        <th width="6%"><p class=zagtable>Издательство</p></th>   
               <th width="8%"><p class=zagtable>Кафедра<?php 
                      $query = "SELECT `id_kaf`, `nomer_kaf` FROM `kafedry` ORDER BY `id_kaf` ASC";
                        //Выполняю запрос
                      $kafl_q = mysql_query ( $query );
                        //В цикле заполняю массив из кафедр
                      echo "<select id='digits'><option value=''>---</option>";
                      while ( $newd = mysql_fetch_object( $kafl_q ) ) {
                     	echo "<option value='$newd->nomer_kaf'>$newd->nomer_kaf</option>";
                      }
                      echo "</select>";?> </p>
              </th>  
        <th width="6%"><p class=zagtable>УДК</p></th>
        <th width="5%"><p class=zagtable>ББК</p></th>
        <th width="4%"><p class=zagtable>Гриф</p></th>
        <th width="11%"><p class=zagtable>Ссылка для скачивания</p></th>  
      </tr>
        
       
 </thead>  
<tbody id='target'>
 <?php


    $i = 1;
    while($news = mysql_fetch_array($new))
    {
   
      $colorrow = "";
     
    
      // Заполняем таблицу значениями
      echo "<tr $colorrow >
              <td align='center' width='3%'><p>".$i++."</p></td>
              <td align='left' width='24%'><p>".$news['authors']."</p></td>
              
              <td align='left' width='33%'><p>".$news['book_name']."</p></td>
              <td align='center' width='5%'><p>".$news['year_book']."</p></td>
              <td align='center' width='6%'><p>".$news['izdatel']."</p></td>
              <td align='center'><p>".$news['nomer_kaf']."</p></td>
              <td align='center' width='6%'><p>".$news['UDK']."</p></td>
              <td align='center' width='5%'><p>".$news['BBK']."</p></td>
              <td align='center' width='4%'><p>".$news['grif']."</p></td>";
  if(trim($news['adress']) != "" && trim($news['adress']) != "-")
        echo "<td align='center' width='11%'><p class='news'><a class='news' href=".$news['adress']." target=blank>".$news['format']."</a></p></td>            
            </tr>";
  else { echo "<td align='center' width='11%'> <p> - </p></td></tr>";}
  
    }
  echo "</tbody>";
    echo "</table>";

<script src="filterTable.v1.0.src.js"></script>
<script>
    filterTable( document.getElementById("target"), {
            3: document.getElementById("digit"),
            5: document.getElementById("digits")
            
        }
    );
</script>

We have two drop-down lists for the table filter. One for the year of publication, the other for the department.
In IE it works correctly in Chrome it's crooked. Please help. probyval does not help.
<select id="digit" onchange=" filterTable( );">