Javascript/jQuery转到下一个输入/选择更改选择值

Question

我写这个脚本来模拟tab键。我从这里混合了2个不同的例子，只对输入有效。

我的剧本是

$("#home").on('keydown', function(event) { 
    if(event.ctrlKey && (event.which === 39)) { 
    var target = document.activeElement; 
     var next = target; 
     while (next = next.nextElementSibling) { 
      if (next == null) 
       break; 
      if (next.tagName.toLowerCase() == "input" || next.tagName.toLowerCase() == "select") { 
       next.focus(); 
       break; 
      } 
     } 
    } 
}); 

我有两个问题。 首先与选择输入

<select id="position" class="toNextWithSimulateTab" name="position" form="athlets_data" style="width:175px"> 
    <option name="1">1</option> 
    <option name="2">2</option> 
    <option name="3">3</option> 
    <option name="4">4</option> 
</select> 

当选择输入是焦点和我按点击率和右箭头（由脚本定义转到下一个输入）值更改为下一个，然后集中的下一个输入。 我想选择一个选项，然后用Ctrl和右箭头去下一个输入。

第二个问题：

我已经分手我的形式与两个div右列，当我点击左侧的DIV输入，并使用我的脚本（ctrl键，右箭头）选项卡输入，所以当向左走列，因此到最后输入不能移动到右侧div的第一个输入。

有什么想法吗？

在此先感谢

<div id="home" class="tab-pane fade in active row" style="padding-left: 20px;"> 
    <h3 style="color:#06F">Στοιχεία ασθενή</h3> 
    <br> 
    <form action="add_new_patient_card.php" id="patient_data" class="redirected_form" method="post"> 
    <div id="patient_data_left_column" class="col-md-5"> 
     <a>Lastname: </a> 
     <input id="lastname" type="text" class="toNextWithSimulateTab" name="lastname" value=""> 
     <br> 
     <br> 
     <a>Firstname: </a> 
     <input id="firstname" type="text" class="toNextWithSimulateTab" name="firstname" value=""> 
     <br> 
     <br> 
     <a>Fathers name: </a> 
     <input id="fathersname" type="text" class="toNextWithSimulateTab" name="fathersname" /> 
     <br> 
     <br> 
     <a>Position: </a> 
     <select id="position" class="toNextWithSimulateTab" name="position" form="athlets_data" style="width:175px"> 
      <option name="1">1</option> 
      <option name="2">2</option> 
      <option name="3">3</option> 
      <option name="4">4</option> 
</select> 
     <br> 
     <br> 
     <a>AMA: </a> 
     <input id="ama" type="text" class="toNextWithSimulateTab" name="ama" /> 
     <br> 
     <br> 
     <a>Birthday: </a> 
     <input id="bday" type="date" class="toNextWithSimulateTab" name="bday" style="width:175px" /> 
     <br> 
     <br> 
     <a>Sex: </a> 
     <select id="sex" class="toNextWithSimulateTab" name="sex" form="patient_data" style="width:175px"> 
      <option name="male">male</option> 
      <option name="female">female</option> 
     </select> 
     <br> 
     <br> 
    </div> 

    <div id="patient_data_right_column" class="col-sm-5"> 
     <a>Phone: </a> 
     <input id="phone" type="text" class="toNextWithSimulateTab" name="phone" value=""> 
     <br> 
     <br> 
     <a>Mobile: </a> 
     <input id="mobile" type="text" class="toNextWithSimulateTab" name="mobile" value=""> 
     <br> 
     <br> 
     <a>Fax: </a> 
     <input id="fax" type="text" class="toNextWithSimulateTab" name="fax" value=""> 
     <br> 
     <br> 
     <a>Email: </a> 
     <input id="email" type="text" class="toNextWithSimulateTab" name="email" value=""> 
     <br> 
     <br> 
     <a>Address: </a> 
     <input id="address" type="text" class="toNextWithSimulateTab" name="address" value=""> 
     <br> 
     <br> 
     <a>City: </a> 
     <input id="city" type="text" class="toNextWithSimulateTab" name="city" value=""> 
     <br> 
     <br> 
     <a>Country: </a> 
     <input id="country" type="text" class="toNextWithSimulateTab" name="country" value=""> 
    </div> 
</form> 
    </div> 

Answer 1

OUFF这是如此艰难，但我做到了hihihi这里是一个Demo

$(".toNextWithSimulateTab").keydown(function(event) 
{ 
    if(event.ctrlKey && (event.which === 39)) 
    { 
     event.preventDefault(); 
     $(this).next(".toNextWithSimulateTab").focus(); 
     if($(this).is(":last-child") && $(this).parent().attr("id") == "patient_data_left_column") 
     { 
      $(this).parent().next().find(".toNextWithSimulateTab:first-child").focus(); 
     } 
    } 
});