如何设置没有类或ID的下一个输入字段

How to set the next input field without class or ID

本文关键字：ID 下一个 字段 输入 何设置 设置      更新时间：2023-09-26

我是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演示

$()是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>

选择器错误。对于目标输入，

1)你需要遍历到父td元素与类targetSiteCell使用.closest('.targetSiteCell')

2)然后到下一个td使用.next()

3)与.find()方法一起查找td:

中的输入元素
 $(this).closest('.targetSiteCell').next().find('input').val("Hello1");
相关文章：