如何設置下一個輸入字段沒有類或ID

Question

我是JQuery和Javascript的新手。我有一個動態創建的表（使用DataTables插件），並有6列和0或更多行。前四列包括兩個下拉菜單和兩個輸入欄。我試圖根據他們在相應的下拉菜單中選擇的內容來設置下一個輸入字段的值。

在下面的例子中，第一個下拉列表有兩個值：Site1和Site2。如果用戶選擇Site2，那麼onchange事件應該會觸發，函數getSiteObjects（）將用一個值填充下一個輸入字段。我不知道他們正在選擇哪個下拉菜單，但我知道下一個表單字段將是我想要設置的相應輸入字段。我怎樣才能設置下一個輸入字段？

片段的HTML：

<tr class="customizationRow odd" role="row"> 
    <td class="sourceSiteCell"> 
     <div class="form-group"> 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
       <option class="option"/> 
       <option class="option">Site1</option> 
       <option class="option">Site2</option> 
      </select> 
     </div> 
    </td> 
    <td class="sourceObjectCell"> 
     <input class="form-control user-input" type="text" value=""> 
    </td> 
    <td class="targetSiteCell"> 
     <div class="form-group"> 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
       <option class="option"/> 
       <option class="option">Site1</option> 
       <option class="option">Site2</option> 
      </select> 
     </div> 
    </td> 
    <td class="targetObjectCell"> 
     <input class="form-control user-input" type="text" value=""> 
    </td> 
<!-- More of the same code for the other columns --> 
</tr> 

JavaScript函數：

function getSiteObjects(select) { 
    var selectedSite = select.value; // Gets the value selected 

    <!-- Make an ajax call to get the value from a REST service --> 
    $(this).next('input').val("Hello1"); // Doesn't work 
    $(this).find('input').val("Hello2"); // Doesn't work 
    // select.next('input').val("Hello3"); // Doesn't work 
} 

我創造了我的問題的演示的jsfiddle：jsFiddle Demo

Answer 1

$()是jQuery的構造函數。

this是對調用的DOM元素的引用。

所以基本上，在$(this)，你必須在$()通過this（在你的情況下接收的參數select）作爲參數，這樣你可以調用jQuery方法和功能。

function getSiteObjects(select) { 
 
    var _this = $(select); 
 
    _this.closest('td').next('td').find('input').val(_this.val()); 
 
}

.console-line 
 
{ 
 
    font-family: monospace; 
 
    margin: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-hover"> 
 
<tr> 
 
    <th>Source Site</th> 
 
    <th>Source Object</th> 
 
    <th>Target Site</th> 
 
    <th>Target Object</th> 
 
</tr> 
 
<tr class="customizationRow odd" role="row"> 
 
    <td class="sourceSiteCell"> 
 
     <div class="form-group"> 
 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
 
       <option class="option"/> 
 
       <option class="option">Site1</option> 
 
       <option class="option">Site2</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td class="sourceObjectCell"> 
 
     <input class="form-control user-input" type="text" value=""> 
 
    </td> 
 
    <td class="targetSiteCell"> 
 
     <div class="form-group"> 
 
      <select class="form-control user-input" onchange="getSiteObjects(this)"> 
 
       <option class="option"/> 
 
       <option class="option">Site1</option> 
 
       <option class="option">Site2</option> 
 
      </select> 
 
     </div> 
 
    </td> 
 
    <td class="targetObjectCell"> 
 
     <input class="form-control user-input" type="text" value=""> 
 
    </td> 
 
<!-- More of the same code for the other columns --> 
 
</tr> 
 
</table>

Answer 2

你錯了選擇目標元素。用於靶向輸入，

1）你需要遍歷與類母體TD元素targetSiteCell使用.next()

3使用.closest('.targetSiteCell')

2）然後到下一個TD）與.find()方法沿找到輸入元件在td中：

$(this).closest('.targetSiteCell').next().find('input').val("Hello1");