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(); 
     } 
    } 
});