如何设置下一个输入字段没有类或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");