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

你有一个错误的选择器来定位元素。对于定位输入，

1）您需要使用.closest('.targetSiteCell')

遍历类targetSiteCell的父td元素

2）然后使用.next()

到下一个td

3）与.find()方法一起在td中找到输入元素：

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

Answer 2

$()是jQuery构造函数。

this是对DOM调用元素的引用。

基本上，在$(this)中，您必须将this中的select（在您的情况下收到参数$()）作为参数传递给您，以便您可以调用jQuery方法和功能。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: