title: Didn't focus this select box in my table by arrow key but all another field successfully focus
body: <p>I am beginner in jQuery and I have a scenario in which I have select boxes and text fields in my table; I implemented the arrow keys (down for next, up for prev) for shifting the focus to the field <strong>by giving a class to each field</strong>.</p>
  <p>The problem is the select box that shows its options <strong>through Ajax</strong> is not <strong>focusing</strong>.</p>
  <p>jQuery for arrow key shift:</p>
  <pre><code>var classNames = $(this).attr(&quot;class&quot;).split(&quot; &quot;);
  // console.log(&quot;aftersplit:&quot; + classNames);
  for ( var contarray = 0, l = classNames.length; contarray &lt; l; contarray++ ) 
  {
      var current_iterating_class=classNames[contarray];
      if(current_iterating_class.indexOf(&quot;table2_index_&quot;)!= -1)
      {
          var current_class=current_iterating_class;
          // console.log(&quot;currently:==&quot;+current_class);
      }
      // console.log(&quot;current_iterating_class===&quot; +current_iterating_class );
  }
  console.log(&quot;current_class==&quot;+current_class);
  var pos= current_class.substr(current_class.indexOf(&quot;_&quot;) +7);
  // console.log(&quot;position&quot;+pos);
  pos=Number(pos);
  if(e.keyCode == 40){                //downarrow(forw)
      pos += 1;
      // console.log(&quot;pos+1=&quot; + pos);                                                         
      $(&quot;.table2_index_&quot;+pos).focus();    
      if(this.tagName == &quot;SELECT&quot; || this.tagName == &quot;select&quot;) {
      }
      // console.log(&quot;down&quot;+pos);
  }
  if(e.keyCode==38){                   
      pos -= 1;
      $(&quot;.table2_index_&quot;+pos).focus();
     // console.log(&quot;upp&quot;+pos);
  }
  </code></pre>
  <p>Table HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;td&gt;
    &lt;select class=&quot;typecode inputbox input_table2 table2_index_1&quot; name=&quot;typecode[]&quot;&gt;
      &lt;option value=&quot;S&quot;&gt;S&lt;/option&gt;
      &lt;option value=&quot;R&quot;&gt;R&lt;/option&gt;
      &lt;option value=&quot;O&quot;&gt;O&lt;/option&gt;
    &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;code inputbox input_table2 table2_index_2&quot; name=&quot;code[]&quot; style=&quot;width: 100%&quot;&gt;
    &lt;input type=&quot;hidden&quot; class=&quot;product_id&quot; name=&quot;product_id[]&quot; style=&quot;width: 100%&quot;&gt;
  &lt;/td&gt;
  &lt;td id=&quot;item&quot; class=&quot;item&quot; align=&quot;center&quot;&gt;
    &lt;select class=&quot;select_item inputbox input_table2 table2_index_3&quot; name=&quot;item[]&quot;&gt;
      &lt;option selected=&quot;selected&quot;&gt;&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;product_id_val&quot; value=&quot;0&quot;&gt;
  &lt;/td&gt;
  
  &lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;type inputbox input_table2 table2_index_4&quot; name=&quot;type[]&quot; style=&quot;width: 100%&quot;&gt;&lt;/td&gt;
  </code></pre>
  <p>Ajax for select's options:</p>
  <pre><code>$(&quot;.select_item&quot;).select2({
      ajax: {
          url: &quot;' . $selectitem . '&quot;,
          dataType: &quot;json&quot;,
      }
  }).on(&quot;change&quot;, function () { 
      var this_=$(this);          
      this_.closest(&quot;tr.rowacc&quot;).find(&quot;.product_id&quot;).val(this.value);
      getitemvalues( this.value,this_);
  });
  </code></pre>
  <p>The other static select boxes are working and I can't find the issue.</p>